.elementor-kit-5{--e-global-color-primary:#F47820;--e-global-color-secondary:#151A22;--e-global-color-text:#333333;--e-global-color-accent:#0077C7;--e-global-color-rmdeep:#0B0E13;--e-global-color-rmsubtle:#F7F7F7;--e-global-color-rmhair:#DDDDDD;--e-global-color-rmquiet:#B3B8C2;--e-global-color-rminfo:#E9EFFC;--e-global-color-rmwhite:#FFFFFF;--e-global-color-8f84115:#F47820;--e-global-typography-primary-font-family:"Archivo";--e-global-typography-primary-font-size:48px;--e-global-typography-primary-font-weight:900;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-primary-font-style:italic;--e-global-typography-primary-line-height:1.02em;--e-global-typography-secondary-font-family:"Archivo";--e-global-typography-secondary-font-size:26px;--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-secondary-font-style:italic;--e-global-typography-secondary-line-height:1.2em;--e-global-typography-secondary-letter-spacing:0.05em;--e-global-typography-text-font-family:"Mulish";--e-global-typography-text-font-size:19px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.6em;--e-global-typography-accent-font-family:"Mulish";--e-global-typography-accent-font-size:18px;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-line-height:1em;background-color:#FFFFFF;color:#333333;font-family:"Mulish", Sans-serif;font-size:19px;font-weight:400;line-height:1.6em;}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{background-color:#F47820;font-family:"Mulish", Sans-serif;font-size:18px;font-weight:600;line-height:1em;color:#151A22;border-radius:999px 999px 999px 999px;padding:14px 28px 14px 28px;}.elementor-kit-5 button:hover,.elementor-kit-5 button:focus,.elementor-kit-5 input[type="button"]:hover,.elementor-kit-5 input[type="button"]:focus,.elementor-kit-5 input[type="submit"]:hover,.elementor-kit-5 input[type="submit"]:focus,.elementor-kit-5 .elementor-button:hover,.elementor-kit-5 .elementor-button:focus{background-color:#E65A0F;color:#151A22;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 a{color:#0077C7;}.elementor-kit-5 a:hover{color:#002652;}.elementor-kit-5 h1{font-family:"Archivo", Sans-serif;font-size:72px;font-weight:900;text-transform:uppercase;font-style:italic;line-height:1em;}.elementor-kit-5 h2{font-family:"Archivo", Sans-serif;font-size:48px;font-weight:900;text-transform:uppercase;font-style:italic;line-height:1.02em;}.elementor-kit-5 h3{font-family:"Archivo", Sans-serif;font-size:34px;font-weight:900;text-transform:uppercase;font-style:italic;line-height:1.05em;}.elementor-kit-5 h4{font-family:"Archivo", Sans-serif;font-size:21px;font-weight:700;text-transform:uppercase;font-style:italic;line-height:1.15em;}.elementor-kit-5 h5{font-family:"Mulish", Sans-serif;font-size:19px;font-weight:700;line-height:1.3em;}.elementor-kit-5 h6{font-family:"Mulish", Sans-serif;font-size:17px;font-weight:700;line-height:1.3em;}.elementor-kit-5 input:not([type="button"]):not([type="submit"]),.elementor-kit-5 textarea,.elementor-kit-5 .elementor-field-textual{color:#333333;background-color:#FFFFFF;border-radius:4px 4px 4px 4px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1440px;}.e-con{--container-max-width:1440px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-5{--e-global-typography-primary-font-size:38px;--e-global-typography-secondary-font-size:22px;--e-global-typography-text-font-size:18px;--e-global-typography-accent-font-size:18px;font-size:18px;}.elementor-kit-5 h1{font-size:52px;}.elementor-kit-5 h2{font-size:38px;}.elementor-kit-5 h3{font-size:28px;}.elementor-kit-5 h4{font-size:20px;}.elementor-kit-5 h5{font-size:18px;}.elementor-kit-5 h6{font-size:17px;}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{font-size:18px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-5{--e-global-typography-primary-font-size:30px;--e-global-typography-secondary-font-size:20px;--e-global-typography-text-font-size:17px;--e-global-typography-accent-font-size:17px;font-size:17px;}.elementor-kit-5 h1{font-size:38px;}.elementor-kit-5 h2{font-size:30px;}.elementor-kit-5 h3{font-size:24px;}.elementor-kit-5 h4{font-size:19px;}.elementor-kit-5 h5{font-size:17px;}.elementor-kit-5 h6{font-size:16px;}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{font-size:17px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//*
 * Reifen Müller Relaunch — zentrales Custom-CSS-Klassensystem
 * Quelle: HANDOFF_MB.md Abschnitte 4–9 (Stand 21.08.2026). Verbindlich.
 * Eine Datei, keine Widget-Einzelstile. Version 1.0.0
 */

/* ---------- 1. Token ---------- */
:root{
  --rm-orange:#F47820;
  --rm-blue:#0077C7;          /* Linkfarbe im Mega-Menue */
  --rm-orange-hover:#E65A0F;
  --rm-orange-active:#CF4F0D;
  --rm-orange-text:#B25817;   /* Orange als Text auf Weiss, nur klein */
  --rm-anthra:#151A22;
  --rm-anthra-deep:#0B0E13;
  --rm-quiet:#B3B8C2;         /* Sekundaertext auf dunklem Grund */
  --rm-text:#333333;
  --rm-text-muted:#666666;
  --rm-hairline:#DDDDDD;
  --rm-surface-subtle:#F7F7F7;
  --rm-surface-info:#E9EFFC;
  --rm-surface-info-line:#C7D4F0;
  --rm-link:#0077C7;
  --rm-link-hover:#002652;
  --rm-white:#FFFFFF;

  --rm-font-display:'Owners Text','Archivo',Arial,sans-serif;
  --rm-font-text:'Proxima Nova','Mulish',Arial,sans-serif;

  --rm-container:1440px;
  --rm-content:1344px;
  --rm-reading:760px;
  --rm-gutter:24px;
  --rm-pad-x:48px;

  --rm-focus-light:0 0 0 1px #151A22, 0 0 0 4px #F47820;
  --rm-focus-dark: 0 0 0 1px #FFFFFF, 0 0 0 4px #F47820;

  --rm-shadow-xs:0 1px 2px rgba(0,0,0,.06);
  --rm-shadow-hover:0 6px 16px rgba(0,0,0,.10);

  --rm-t-fast:120ms ease;
  --rm-t-base:200ms ease;
  --rm-t-slow:320ms ease;
}
@media (max-width:1024px){ :root{ --rm-pad-x:32px; } }
@media (max-width:767px){ :root{ --rm-pad-x:20px; --rm-gutter:20px; } }

/* ---------- 2. Sektionstypen (5) ---------- */
.section-lead{ background:var(--rm-anthra); color:var(--rm-white);
  padding:96px var(--rm-pad-x); }   /* Kopfflaeche: gleiche Raender wie die uebrigen Abschnitte */
.section-plain{ background:var(--rm-white); color:var(--rm-text); padding:96px var(--rm-pad-x); }
.section-subtle{ background:var(--rm-surface-subtle); color:var(--rm-text);
  border-top:1px solid var(--rm-hairline); border-bottom:1px solid var(--rm-hairline);
  padding:96px var(--rm-pad-x); }
.section-campaign{ background:var(--rm-anthra-deep); color:var(--rm-white);
  border-top:3px solid var(--rm-orange); border-bottom:3px solid var(--rm-orange);
  padding:96px var(--rm-pad-x); }
.section-reading{ background:var(--rm-white); color:var(--rm-text); padding:96px var(--rm-pad-x); }
.section-reading > .e-con-inner, .section-reading .rm-reading{ max-width:var(--rm-reading); margin-inline:auto; }


.section-tight{ padding-top:72px; padding-bottom:72px; }

body a {
    text-decoration: none !important;
}
/* Begrenzung nur fuer das Foto auf der Filialseite (Template 432), nicht fuer
   die Filialkacheln — die fuellen ihre Karte komplett. */
.rm-filialfoto .jet-listing-dynamic-image img{
  width:100%; max-width:100%; height:100%; min-height:260px;
  object-fit:cover; object-position:center; border-radius:8px; }
.rm-filialfoto, .rm-filialfoto .jet-listing-dynamic-image{ height:100%; }
@media (max-width:1024px){
  .section-plain,.section-subtle,.section-campaign,.section-reading,.section-lead{ padding-top:72px; padding-bottom:72px; }
  .section-tight{ padding-top:56px; padding-bottom:56px; }
}
@media (max-width:767px){
  .section-plain,.section-subtle,.section-campaign,.section-reading,.section-lead{ padding-top:56px; padding-bottom:56px; }
  .section-tight{ padding-top:40px; padding-bottom:40px; }
}

/* ---------- 3. Karten (2) ---------- */
.rm-card{ background:var(--rm-white); border:1px solid var(--rm-hairline); border-radius:8px;
  box-shadow:var(--rm-shadow-xs); overflow:hidden;
  transition:transform var(--rm-t-base), box-shadow var(--rm-t-base); }
@media (hover:hover){
  .rm-card:hover{ transform:translateY(-2px); box-shadow:var(--rm-shadow-hover); }
}
.rm-card-dark{ background:var(--rm-anthra-deep); border:none; border-radius:8px; overflow:hidden;
  color:var(--rm-white); }
.rm-card .rm-card-pad, .rm-card-dark .rm-card-pad{ padding:24px; }
@media (max-width:767px){ .rm-card .rm-card-pad, .rm-card-dark .rm-card-pad{ padding:20px; } }

/* ---------- 4. Buttons (2, Pillen) ---------- */
.btn-primary, .btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius:999px; min-height:48px; padding:14px 28px;
  font-family:var(--rm-font-text); font-weight:600; font-size:18px; line-height:1;
  text-decoration:none; cursor:pointer; text-transform:none;
  transition:background-color var(--rm-t-base), color var(--rm-t-base), border-color var(--rm-t-base);
}
.btn-primary{ background:var(--rm-orange); color:var(--rm-anthra); border:none; }
.btn-primary:hover{ background:var(--rm-orange-hover); color:var(--rm-anthra); }
.btn-primary:active{ background:var(--rm-orange-active); color:var(--rm-anthra); }
.btn-primary:disabled, .btn-primary[aria-disabled="true"]{
  background:#E6E7E4; color:#767676; cursor:not-allowed; }

.btn-secondary{ background:transparent; color:var(--rm-anthra); border:2px solid var(--rm-anthra); }
.btn-secondary:hover{ background:var(--rm-anthra); color:var(--rm-white); }

/* Fix 27.08.: Die Kit-Linkfarbe (.elementor-kit-5 a, Spezifität 0,1,1) schlug die
   Button-Textfarbe (.btn-primary, 0,1,0) — Buttons wurden blau. Gleiche Regeln,
   höhere Spezifität. Schrift auf Orange = Anthrazit (Kundenfreigabe 18.08., WCAG). */
.elementor-kit-5 a.btn-primary, a.btn-primary{ color:var(--rm-anthra); }
.elementor-kit-5 a.btn-primary:hover, a.btn-primary:hover{ color:var(--rm-anthra); }
.elementor-kit-5 a.btn-secondary, a.btn-secondary{ color:var(--rm-anthra); }
.elementor-kit-5 a.btn-secondary:hover, a.btn-secondary:hover{ color:var(--rm-white); }
.elementor-kit-5 .section-lead a.btn-secondary, .elementor-kit-5 .section-campaign a.btn-secondary,
.elementor-kit-5 .rm-card-dark a.btn-secondary,
.elementor-kit-5 .rm-mega-cta a.btn-secondary{ color:var(--rm-white); }
.elementor-kit-5 .section-lead a.btn-secondary:hover, .elementor-kit-5 .section-campaign a.btn-secondary:hover,
.elementor-kit-5 .rm-card-dark a.btn-secondary:hover,
.elementor-kit-5 .rm-mega-cta a.btn-secondary:hover{ color:var(--rm-anthra); }
.btn-secondary:active{ background:var(--rm-anthra-deep); color:var(--rm-white); }
.btn-secondary:disabled, .btn-secondary[aria-disabled="true"]{
  border-color:#BBBBBB; color:#767676; background:transparent; cursor:not-allowed; }

/* Auf dunklem Grund */
.section-lead .btn-secondary, .section-campaign .btn-secondary, .rm-card-dark .btn-secondary,
.rm-mega-cta .btn-secondary{
  border-color:var(--rm-white); color:var(--rm-white); background:transparent; }
.section-lead .btn-secondary:hover, .section-campaign .btn-secondary:hover, .rm-card-dark .btn-secondary:hover,
.rm-mega-cta .btn-secondary:hover{
  background:var(--rm-white); color:var(--rm-anthra); }

@media (max-width:767px){
  .btn-primary,.btn-secondary{ min-height:52px; font-size:17px; width:100%; }
  .rm-btn-row{ display:flex; flex-direction:column; gap:12px; }
}
@media (min-width:768px){
  .rm-btn-row{ display:flex; gap:16px; flex-wrap:wrap; }
}

/* ---------- 5. Fokus, global und einmalig ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:none;
  box-shadow:var(--rm-focus-light);
}
.section-lead :focus-visible,.section-campaign :focus-visible,.rm-card-dark :focus-visible{
  box-shadow:var(--rm-focus-dark);
}

/* ---------- 6. Eingabefelder ---------- */
.rm-input, .rm-form input[type="text"], .rm-form input[type="email"], .rm-form input[type="tel"],
.rm-form input[type="search"], .rm-form select, .rm-form textarea{
  border:1px solid var(--rm-hairline); border-radius:4px; min-height:44px;
  font-family:var(--rm-font-text); font-size:17px; color:var(--rm-text);
  padding:10px 14px; background:var(--rm-white); width:100%;
}
.rm-input-lg{ min-height:54px; font-size:18px; }
.rm-form ::placeholder{ color:var(--rm-text-muted); opacity:1; }
.rm-form input:focus-visible, .rm-form select:focus-visible, .rm-form textarea:focus-visible{
  border-color:var(--rm-anthra);
}
.rm-label{ display:block; font-family:var(--rm-font-text); font-weight:700; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; color:var(--rm-text); }
.section-lead .rm-label, .section-campaign .rm-label{ color:var(--rm-white); }

/* ---------- 7. Typografie-Helfer ---------- */
.rm-display, .rm-h1, .rm-h2, .rm-h3{
  font-family:var(--rm-font-display); font-style:italic; text-transform:uppercase;
  letter-spacing:normal; text-wrap:pretty;
}
.rm-h1{ font-weight:900; font-size:72px; line-height:.9; }
.rm-h2{ font-weight:900; font-size:48px; line-height:.9; }
.rm-h3{ font-weight:900; font-size:34px; line-height:.95; }
.rm-h4{ font-family:var(--rm-font-display); font-style:italic; text-transform:uppercase;
  font-weight:700; font-size:21px; line-height:1.15; }
.rm-subline{ font-family:var(--rm-font-display); font-style:italic; text-transform:uppercase;
  font-weight:700; font-size:26px; line-height:1.2; letter-spacing:.05em; }
.rm-dachzeile{ font-family:var(--rm-font-display); font-style:italic; text-transform:uppercase;
  font-weight:500; font-size:16px; line-height:1.2; letter-spacing:.05em; }
.rm-lead{ font-family:var(--rm-font-text); font-weight:500; font-size:22px; line-height:1.55; }
.rm-body{ font-family:var(--rm-font-text); font-weight:400; font-size:19px; line-height:1.6; }
.rm-body-s{ font-size:17px; line-height:1.55; }
.rm-meta{ font-family:var(--rm-font-text); font-size:15px; line-height:1.5; color:var(--rm-text-muted); }
.rm-zwischenhead{ font-family:var(--rm-font-text); font-weight:600; font-style:italic;
  text-transform:uppercase; font-size:19px; }
.rm-legal{ font-family:var(--rm-font-text); font-size:15px; line-height:1.6; }

@media (max-width:1024px){
  .rm-h1{ font-size:52px; } .rm-h2{ font-size:38px; } .rm-h3{ font-size:28px; }
  .rm-h4{ font-size:20px; } .rm-subline{ font-size:22px; }
  .rm-lead{ font-size:20px; } .rm-body{ font-size:18px; }
}
@media (max-width:767px){
  .rm-h1{ font-size:38px; } .rm-h2{ font-size:30px; } .rm-h3{ font-size:24px; }
  .rm-h4{ font-size:19px; } .rm-subline{ font-size:20px; } .rm-dachzeile{ font-size:15px; }
  .rm-lead{ font-size:18px; } .rm-body{ font-size:17px; } .rm-body-s{ font-size:16px; }
}

/* Textfarben-Regeln dunkler Grund: nur Weiss und Orange */
.section-lead, .section-lead h1, .section-lead h2, .section-lead h3,
.section-campaign, .section-campaign h2, .section-campaign h3{ color:var(--rm-white); }
.rm-accent{ color:var(--rm-orange); }              /* nur auf dunklem Grund */
.rm-quiet{ color:var(--rm-quiet); }                 /* nachgeordneter Text, dunkler Grund */
.rm-accent-onwhite{ color:var(--rm-orange-text); }  /* Orange als Text auf Weiss, nur klein */

/* Links im Fliesstext auf hellem Grund */
.rm-body a, .section-plain a:not(.btn-primary):not(.btn-secondary),
.section-subtle a:not(.btn-primary):not(.btn-secondary),
.section-reading a:not(.btn-primary):not(.btn-secondary){
  color:var(--rm-link); text-decoration:underline; text-underline-offset:2px;
  transition:color var(--rm-t-fast);
}
.section-plain a:not(.btn-primary):not(.btn-secondary):hover,
.section-subtle a:not(.btn-primary):not(.btn-secondary):hover,
.section-reading a:not(.btn-primary):not(.btn-secondary):hover{ color:var(--rm-link-hover); }

/* ---------- 8. Hinweisfeld (Saisonhinweis, M05) ---------- */
.rm-info{ background:var(--rm-surface-info); border:1px solid var(--rm-surface-info-line);
  border-radius:8px; padding:16px 20px; color:#002652;
  font-family:var(--rm-font-text); font-size:17px; line-height:1.55; }

/* ---------- 9. Diverses ---------- */
.rm-hairline-top{ border-top:1px solid var(--rm-hairline); }
.rm-reading{ max-width:var(--rm-reading); }
.rm-visually-hidden{ position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; }

/* Skip-Link */
.rm-skip-link{ position:absolute; left:-9999px; top:0; z-index:100000;
  background:var(--rm-white); color:var(--rm-anthra); padding:12px 20px; border-radius:0 0 8px 0; }
.rm-skip-link:focus{ left:0; }

/* ---------- 9b. Filial-Module ---------- */
/* M14 Leistungsliste */
.rm-leistungen{ list-style:none; margin:0; padding:0; font-family:var(--rm-font-text); font-size:17px; line-height:1.4; }
.rm-leistungen li{ padding:8px 0 8px 28px; position:relative; border-bottom:1px solid var(--rm-hairline); }
.rm-leistungen li::before{ content:""; position:absolute; left:4px; top:14px; width:12px; height:12px;
  border-radius:50%; background:var(--rm-orange); }
@media (min-width:768px){
  .rm-leistungen-2col{ columns:2; column-gap:var(--rm-gutter); }
  .rm-leistungen-2col li{ break-inside:avoid; }
}
.rm-meister{ margin-top:16px; padding-top:16px; font-family:var(--rm-font-text); font-size:17px; }

/* M10 Ansprechpartner */
.rm-ap-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:var(--rm-gutter); }
.rm-ap-media{ aspect-ratio:4/5; background:var(--rm-anthra); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.rm-ap-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.rm-ap-initialen{ font-family:var(--rm-font-display); font-style:italic; font-weight:900; font-size:56px; color:var(--rm-orange); }
.rm-ap-name{ font-family:var(--rm-font-text); font-weight:700; font-size:18px; margin:0; }
.rm-ap-funktion{ margin:4px 0 0; }
.rm-ap-tel{ margin:8px 0 0; font-size:16px; }

/* M04 Oeffnungszeiten */
.rm-hours-list{ margin:0; }
.rm-hours-row{ display:flex; justify-content:space-between; gap:16px; padding:8px 0;
  border-bottom:1px solid var(--rm-hairline); font-family:var(--rm-font-text); font-size:17px; }
.rm-hours-row dt{ font-weight:600; } .rm-hours-row dd{ margin:0; }
.rm-hours-zusatz{ margin-top:16px; padding-top:16px; font-family:var(--rm-font-text); font-size:16px; }
.rm-hours-fallback, .rm-hours-manual{ font-family:var(--rm-font-text); font-size:17px; line-height:1.55; }

/* Kontaktblock */
address.rm-kontakt{ font-style:normal; font-family:var(--rm-font-text); font-size:17px; line-height:1.7; }

/* Claim: STARK versal, Rest klein — nie ueber Heading-Stile setzen */
.rm-claim{ font-family:var(--rm-font-text); font-weight:700; font-size:26px; line-height:1.3;
  text-transform:none; margin:0; }
@media (max-width:1024px){ .rm-claim{ font-size:22px; } }
@media (max-width:767px){ .rm-claim{ font-size:20px; } }

/* ---------- 9c. Header & Footer (Design: weisser Header, Unterstrich-Zeiger) ---------- */
.rm-header-main{ border-bottom:1px solid var(--rm-hairline); }
.rm-header-main .elementor-nav-menu--main .elementor-item{
  border-bottom:3px solid transparent; transition:border-color var(--rm-t-base); }
.rm-header-main .elementor-nav-menu--main .elementor-item:hover,
.rm-header-main .elementor-nav-menu--main .elementor-item:focus,
.rm-header-main .elementor-nav-menu--main .elementor-item.elementor-item-active{
  border-bottom-color:var(--rm-orange); }
.rm-header-main .elementor-menu-toggle{ color:var(--rm-anthra); }

.rm-utility a{ color:var(--rm-quiet); font-family:var(--rm-font-text); font-size:14px; text-decoration:none; }
.rm-utility a:hover{ color:var(--rm-white); }
.rm-utility .elementor-nav-menu--main .elementor-item{ color:var(--rm-quiet); font-size:14px; padding:4px 12px; }
.rm-utility .elementor-nav-menu--main .elementor-item:hover{ color:var(--rm-white); }

.rm-footer{ color:var(--rm-white); }
.rm-footer a{ color:var(--rm-quiet); text-decoration:none; }
.rm-footer a:hover{ color:var(--rm-white); }
.rm-footer .elementor-nav-menu--main .elementor-item{ color:var(--rm-quiet); font-family:var(--rm-font-text); font-size:16px; padding:4px 0; }
.rm-footer .elementor-nav-menu--main .elementor-item:hover{ color:var(--rm-white); }
.rm-footer-bottom{ border-top:1px solid rgba(255,255,255,.12); }
.rm-footer .rm-claim{ color:var(--rm-orange); font-size:20px; }

/* ---------- 9d. Filialkachel (M11) & Karte ---------- */
a.rm-kachel{ display:flex; flex-direction:column; text-decoration:none; color:inherit; height:100%; }
.rm-kachel-media{ display:block; aspect-ratio:3/2; background:var(--rm-anthra); position:relative; overflow:hidden; }
.rm-kachel-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.rm-kachel-fallback{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--rm-font-display); font-style:italic; font-weight:900; font-size:28px;
  text-transform:uppercase; color:var(--rm-white); padding:12px; text-align:center; }
.rm-kachel-body{ display:flex; flex-direction:column; gap:6px; }
.rm-kachel-ort{ font-family:var(--rm-font-display); font-style:italic; font-weight:700;
  text-transform:uppercase; font-size:21px; color:var(--rm-anthra); }
.rm-kachel-adresse{ font-family:var(--rm-font-text); font-size:15px; color:var(--rm-text-muted); }
.rm-kachel-merkmale{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.rm-kachel-tag{ font-family:var(--rm-font-text); font-weight:700; font-size:13px; letter-spacing:.04em;
  padding:4px 10px; border:1px solid var(--rm-hairline); border-radius:999px; color:var(--rm-text); }
/* Ohne Foto traegt die Anthrazitflaeche den Namen; die Koerperzeile ist dann redundant */
@media (min-width:768px){
  .rm-kachel--nofoto .rm-kachel-ort{ display:none; }
}
@media (max-width:767px){
  .rm-kachel-media{ display:none; } /* Kachel verliert mobil ihr Bild, Absicht (HANDOFF) */
}
.rm-kachel-cta{ font-family:var(--rm-font-text); font-weight:700; font-size:15px;
  color:var(--rm-orange-text); margin-top:4px; }
.rm-kachel-body{ gap:8px; }
.rm-map .jet-map-listing{ height:560px !important; border-radius:8px; overflow:hidden; }
@media (max-width:767px){ .rm-map .jet-map-listing{ height:420px !important; } }

/* ---------- 9e. Video (M06), Stellen ---------- */
.rm-video{ position:relative; aspect-ratio:16/9; background:var(--rm-anthra); border-radius:8px; overflow:hidden; }
.rm-video img{ width:100%; height:100%; object-fit:cover; display:block; }
.rm-video-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; gap:10px; border:none; cursor:pointer;
  background:var(--rm-orange); color:var(--rm-anthra); border-radius:999px; min-height:52px;
  padding:14px 28px; font-family:var(--rm-font-text); font-weight:600; font-size:18px; }
.rm-video-play:hover{ background:var(--rm-orange-hover); }

a.rm-stelle{ display:block; text-decoration:none; color:inherit; height:100%; }
.rm-stelle-body{ display:flex; flex-direction:column; gap:8px; }
.rm-stelle-titel{ font-family:var(--rm-font-text); font-weight:700; font-size:19px; color:var(--rm-anthra); }
.rm-stelle-meta{ font-family:var(--rm-font-text); font-size:15px; color:var(--rm-text-muted); }
.rm-stelle-link{ font-family:var(--rm-font-text); font-weight:700; font-size:15px; color:var(--rm-orange-text); }
.rm-stelle-eckdaten{ font-family:var(--rm-font-text); font-size:17px; color:var(--rm-quiet); }
.rm-joblist{ list-style:none; margin:0; padding:0; }
.rm-joblist li{ padding:10px 0; border-bottom:1px solid var(--rm-hairline); font-family:var(--rm-font-text); font-size:17px; }

/* Raster für Kacheln (Regionsseiten, Aktionen) */
.rm-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:var(--rm-gutter); }

/* ---------- 9f. Zahlenband ---------- */
.rm-zahlen{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:var(--rm-gutter); }
.rm-zahlen > div{ display:flex; flex-direction:column; gap:4px; padding:20px 0; border-top:3px solid var(--rm-orange); }
.rm-zahlen strong{ font-family:var(--rm-font-display); font-style:italic; font-weight:900;
  font-size:44px; line-height:1; color:var(--rm-anthra); }
.rm-zahlen span{ font-family:var(--rm-font-text); font-size:16px; color:var(--rm-text-muted); }

/* ---------- 9g. Design-Raster (Startseiten-Layout, 12 Spalten 1344px) ---------- */
.dsg{ display:grid; grid-template-columns:repeat(12,1fr); gap:24px; max-width:1344px; margin:0 auto; width:100%; }
.dsc-3{ grid-column:span 3; } .dsc-4{ grid-column:span 4; } .dsc-6{ grid-column:span 6; }
.dsc-8{ grid-column:span 8; } .dsc-12{ grid-column:span 12; }
.dsc-s5-8{ grid-column:5 / span 8; }
.dsc-img-r{ grid-column:9 / span 4; grid-row:1 / span 3; }
.dsc-img-l{ grid-column:1 / span 4; grid-row:1 / span 4; }
@media (max-width:1024px){
  .dsc-3{ grid-column:span 6; } .dsc-4{ grid-column:span 6; }
  .dsc-8,.dsc-s5-8{ grid-column:span 12; }
  .dsc-img-r,.dsc-img-l{ grid-column:span 12; grid-row:auto; }
}
@media (max-width:767px){
  .dsc-3,.dsc-4,.dsc-6{ grid-column:span 12; }
}
.rm-kicker{ width:48px; height:4px; background:var(--rm-orange); }
.rm-dach-lg{ margin:0; font-family:var(--rm-font-display); font-style:italic; font-weight:500;
  text-transform:uppercase; letter-spacing:.05em; font-size:18px; }
.rm-check{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px;
  font-family:var(--rm-font-text); font-size:18px; line-height:1.4; color:var(--rm-text); }
.rm-check li{ display:flex; gap:12px; }
.rm-check li i{ color:var(--rm-anthra); margin-top:4px; }
.rm-search-pill{ display:flex; align-items:center; gap:12px; background:var(--rm-white);
  border-radius:999px; padding:6px 6px 6px 24px; }
.rm-search-pill.rm-search-bordered{ border:1px solid var(--rm-hairline); }
.rm-search-pill i{ color:#4d4d4d; }
.rm-search-pill input{ border:none; outline:none; background:transparent;
  font:400 18px/1 var(--rm-font-text); color:var(--rm-anthra); width:236px; padding:12px 0; }
.rm-usp-col{ display:flex; flex-direction:column; gap:12px; border-top:1px solid rgba(255,255,255,.24); padding-top:24px; }
.rm-usp-col i{ font-size:28px; color:var(--rm-orange); }
.rm-usp-col .rm-usp-t{ margin:0; font-family:var(--rm-font-text); font-size:20px; font-weight:700; line-height:1.3; color:var(--rm-white); }
.rm-usp-col .rm-usp-s{ margin:0; font-family:var(--rm-font-text); font-size:16px; line-height:1.4; color:var(--rm-quiet); }
.rm-region-card{ background:var(--rm-white); border:1px solid var(--rm-hairline); border-radius:8px;
  padding:32px; box-shadow:var(--rm-shadow-xs); display:flex; flex-direction:column; gap:20px; }
.rm-region-card ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:14px;
  font-family:var(--rm-font-text); font-size:18px; line-height:1.4; }
.rm-region-card li{ display:flex; justify-content:space-between; gap:16px;
  border-bottom:1px solid var(--rm-hairline); padding-bottom:12px; }
.rm-region-card li:last-child{ border-bottom:none; padding-bottom:0; }
.rm-region-card li span{ color:#4d4d4d; }
.rm-ds-card{ background:var(--rm-white); border:1px solid var(--rm-hairline); border-radius:8px;
  padding:32px; box-sizing:border-box; box-shadow:var(--rm-shadow-xs);
  display:flex; flex-direction:column; justify-content:space-between; gap:24px; min-height:280px;
  transition:transform var(--rm-t-base), box-shadow var(--rm-t-base); }
@media (hover:hover){ .rm-ds-card:hover{ transform:translateY(-2px); box-shadow:var(--rm-shadow-hover); } }
.rm-ds-card > i{ font-size:32px; color:var(--rm-anthra); }
.rm-ds-card h3{ margin:0; font-family:var(--rm-font-text); font-style:normal; text-transform:none;
  font-weight:700; font-size:22px; line-height:1.2; color:var(--rm-anthra); }
.rm-ds-card p{ margin:0; font-family:var(--rm-font-text); font-size:16px; line-height:1.4; color:var(--rm-text); }
.rm-ds-card a{ font-family:var(--rm-font-text); font-size:18px; font-weight:600; color:var(--rm-link); text-decoration:none; }
.rm-ds-card a:hover{ color:var(--rm-link-hover); }
.rm-region-card a{ color:var(--rm-link); text-decoration:none; }
.rm-region-card a:hover{ color:var(--rm-link-hover); }
.rm-media-card{ background:var(--rm-white); border:1px solid var(--rm-hairline); border-radius:8px;
  overflow:hidden; box-shadow:var(--rm-shadow-xs); display:flex; flex-direction:column;
  transition:transform var(--rm-t-base), box-shadow var(--rm-t-base); }
@media (hover:hover){ .rm-media-card:hover{ transform:translateY(-2px); box-shadow:var(--rm-shadow-hover); } }
.rm-media-card .rm-mc-img{ position:relative; aspect-ratio:16/9; background:#f1f1f1; border-bottom:1px solid var(--rm-hairline); }
.rm-media-card .rm-mc-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rm-media-card .rm-mc-body{ padding:32px; display:flex; flex-direction:column; gap:16px; }
.rm-media-card h3{ margin:0; font-family:var(--rm-font-text); font-style:normal; text-transform:none;
  font-weight:700; font-size:24px; line-height:1.2; color:var(--rm-anthra); }
.rm-media-card p{ margin:0; font-family:var(--rm-font-text); font-size:18px; line-height:1.5; color:var(--rm-text); }
.rm-side-img{ position:relative; aspect-ratio:4/3; border-radius:8px; overflow:hidden;
  background:#f1f1f1; border:1px solid var(--rm-hairline); }
.rm-side-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rm-hero-note{ margin:0; font-family:var(--rm-font-text); font-size:16px; line-height:1.5; color:var(--rm-quiet); }
.rm-h1-hero{ margin:0; font-family:var(--rm-font-display); font-style:italic; font-weight:900;
  text-transform:uppercase; font-size:72px; line-height:.9; color:var(--rm-white); }
@media (max-width:1024px){ .rm-h1-hero{ font-size:52px; } }
@media (max-width:767px){ .rm-h1-hero{ font-size:38px; } }

/* Elementor-Sticky dupliziert den Header als Spacer: den Menü-Klon komplett entfernen
   (doppelte fokussierbare Links, doppelte IDs). */
.elementor-sticky__spacer .rm-mega{ display:none !important; }

/* ---------- 9h. Mega-Menü (Struktur v7: Menügruppen) ---------- */
/* Panels sollen die volle Header-Breite spannen: alle Zwischenanker neutralisieren,
   der Header-Container selbst ist der positionierte Vorfahr. */
.rm-header-main{ position:relative; }
.rm-header-main .elementor-widget-shortcode,
.rm-header-main .elementor-widget-shortcode .elementor-widget-container,
.rm-header-main .elementor-widget-shortcode .elementor-shortcode{ position:static; }
.rm-mega{ position:static; }
.rm-mega ul{ margin:0; padding:0; list-style:none; }
.rm-mega-bar{ display:flex; align-items:center; gap:8px; }
.rm-mega-bar > li{ position:static; }
.rm-mega-bar > li > a{
  /* Designexport Desktop: Hauptzeile 104px hoch, der Menuepunkt fuellt sie ganz
     (die orange Unterkante sitzt dadurch auf der Zeilenkante). */
  display:inline-flex; align-items:center; gap:8px; padding:0 14px;
  height:104px; box-sizing:border-box;
  font-family:var(--rm-font-text); font-weight:600; font-size:18px; color:var(--rm-anthra);
  text-decoration:none; border-bottom:3px solid transparent; white-space:nowrap;
  transition:border-color var(--rm-t-base); }
.rm-mega-bar > li > a i{ font-size:12px; color:#4d4d4d; transition:transform var(--rm-t-base); }
.rm-mega-bar > li:hover > a, .rm-mega-bar > li:focus-within > a,
.rm-mega-bar > li > a[aria-current="page"]{ border-bottom-color:var(--rm-orange); }
.rm-mega-bar > li:hover > a i, .rm-mega-bar > li:focus-within > a i{ transform:rotate(180deg); }

.rm-mega-panel{
  position:absolute; left:0; right:0; top:100%; z-index:1000;
  background:var(--rm-white); border-bottom:1px solid var(--rm-hairline);
  box-shadow:0 24px 40px rgba(0,0,0,.10);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity var(--rm-t-base), transform var(--rm-t-base), visibility var(--rm-t-base); }
.rm-mega-bar > li:hover > .rm-mega-panel,
.rm-mega-bar > li:focus-within > .rm-mega-panel{
  opacity:1; visibility:visible; transform:translateY(0); }
/* Panel: vier Linkspalten, rechts die dunkle Aktionsbox. Die Innenraender
   sind dieselben wie in der Kopfzeile (48/32px), damit die erste Spalte
   genau unter dem Logo beginnt. */
/* Panelinhalt genau so breit wie der Kopfzeileninhalt: aussen 48px Rand,
   innen hoechstens 1440px zentriert (die Kopfzeile ist ein boxed Container). */
.rm-mega-inner{ width:min(1440px, calc(100% - 96px)); margin:0 auto; padding:40px 0;
  display:grid; grid-template-columns:minmax(0,1fr) 320px;
  align-items:stretch; gap:40px; }
/* Textspalten: bis zu vier gleich breite Spalten */
.rm-mega-spalten{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:start; gap:24px 40px; }
/* Wenige Links: Kacheln mit Symbol, vier je Reihe, Gruppentitel ueber die Breite */
.rm-mega-kacheln{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.rm-mega-kacheln .rm-mega-gruppe{ grid-column:1 / -1; margin:8px 0 0; }
.rm-mega-kacheln .rm-mega-gruppe:first-child{ margin-top:0; }
.elementor-kit-5 .rm-mega-kachel, .rm-mega-kachel{
  display:flex; align-items:center; gap:14px; min-height:64px; padding:14px 18px;
  background:var(--rm-white); border:1px solid var(--rm-hairline); border-radius:8px;
  font-family:var(--rm-font-text); font-size:17px; font-weight:600; line-height:1.3;
  color:var(--rm-anthra); text-decoration:none;
  transition:border-color var(--rm-t-base), box-shadow var(--rm-t-base), color var(--rm-t-base); }
.elementor-kit-5 .rm-mega-kachel:hover, .elementor-kit-5 .rm-mega-kachel:focus,
.rm-mega-kachel:hover, .rm-mega-kachel:focus{
  border-color:var(--rm-orange); color:var(--rm-orange-text);
  box-shadow:0 2px 8px rgba(0,0,0,.06); }
.rm-mega-kachel i{ flex:0 0 auto; width:24px; font-size:20px; color:var(--rm-orange);
  text-align:center; }
/* Spaltentitel: zweizeilig gedacht, Text sitzt unten. Dadurch liegen die
   Haarlinien aller Spalten auf einer Hoehe, auch wenn ein Titel umbricht
   („Haendlerbereich – Ihr Reifengrosshandel") oder eine Fortsetzungsspalte
   gar keinen Titel hat. */
.rm-mega-group-title{ margin:0 0 14px; font-family:var(--rm-font-display); font-style:italic;
  font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:15px;
  line-height:1.25; color:var(--rm-anthra);
  display:flex; align-items:flex-end;
  min-height:50px;   /* zwei Zeilen 15px/1.25 plus 12px Polster, feste Zahl vermeidet Rundungsversatz */
  padding-bottom:12px; border-bottom:1px solid var(--rm-hairline); }
.rm-mega-col ul{ display:flex; flex-direction:column; gap:0; }
/* Kit-Selektor, sonst gewinnt die allgemeine Linkfarbe des Kits */
.elementor-kit-5 .rm-mega-col a, .rm-mega-col a{
  display:block; padding:8px 0; font-family:var(--rm-font-text); font-size:17px;
  line-height:1.35; color:var(--rm-blue); text-decoration:none;
  transition:color var(--rm-t-fast); }
.elementor-kit-5 .rm-mega-col a:hover, .elementor-kit-5 .rm-mega-col a:focus,
.rm-mega-col a:hover, .rm-mega-col a:focus{ color:var(--rm-orange-text); }
.rm-mega-col a strong{ font-weight:700; }

/* Aktionsbox: immer die fuenfte Spalte, dunkel wie im Layout */
.rm-mega-cta{ grid-column:2; grid-row:1; align-self:stretch;
  background:var(--rm-anthra); border:none; border-radius:0;
  padding:28px; display:flex; flex-direction:column; gap:14px; }
.rm-mega-cta .rm-mega-group-title{ border:none; padding:0; margin:0; color:#fff;
  font-family:var(--rm-font-display); font-style:italic; font-weight:900;
  text-transform:uppercase; letter-spacing:0; font-size:24px; line-height:1.05; }
.rm-mega-cta p{ margin:0; font-family:var(--rm-font-text); font-size:16px; line-height:1.5;
  color:var(--rm-quiet); }
.rm-mega-cta .btn-primary, .rm-mega-cta .btn-secondary{ align-self:stretch; justify-content:center;
  display:inline-flex; align-items:center; min-height:48px; padding:12px 24px; font-size:17px;
  border-radius:999px; }
@media (max-width:1400px){
  .rm-mega-inner{ grid-template-columns:minmax(0,1fr) 280px; gap:32px;
    width:min(1440px, calc(100% - 96px)); }
  .rm-mega-spalten{ gap:24px 32px; }
}
/* Zwischen 1025 und rund 1300 Pixeln blieb die Mega-Leiste vierspaltig, obwohl
   dafuer kein Platz mehr ist: Bei 1100px Fensterbreite bleiben nach Rand (96),
   Aktionsbox (280) und Abstaenden rund 150 Pixel je Spalte. Die Spaltentitel
   brachen dreizeilig um („Haendlerbereich – Ihr Reifengrosshandel"), Links
   trennten mitten im Wort („RM-24-Pannenservice"), und die fuenf Regionskacheln
   standen als 4 + 1.

   Unterhalb der Schwellen wird die Spaltenzahl daher zurueckgenommen. Die
   Textspalten stehen paarweise — eine Spalte mit Titel, eine Fortsetzung ohne —
   deshalb ist bei zwei Spalten jedes Paar wieder nebeneinander.
   Unter 1025px uebernimmt ohnehin die Schublade (Abschnitt 20). */
@media (max-width:1300px){
  .rm-mega-inner{ grid-template-columns:minmax(0,1fr) 260px; gap:28px;
    width:min(1440px, calc(100% - 64px)); }
  /* Alle Mega-Panels haben inzwischen vier Textspalten (Reifen & Raeder seit
     der Nutzfahrzeug-Spalte, Autoservice und Geschaeftskunden schon vorher).
     Bei drei Spalten rutschte die vierte allein in eine zweite Reihe. Vier
     Spalten sind hier rund 202px breit, also kaum schmaler als die 212px am
     Desktop — es passt, ohne dass etwas umbricht. */
  .rm-mega-spalten{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px 28px; }
  .rm-mega-kacheln{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
/* Unter 1200px werden vier Spalten zu eng: dann zwei mal zwei, wodurch die
   Paare aus Titelspalte und Fortsetzung nebeneinander bleiben. */
@media (max-width:1200px){
  .rm-mega-inner{ grid-template-columns:minmax(0,1fr) 240px; gap:24px;
    width:min(1440px, calc(100% - 48px)); padding:32px 0; }
  .rm-mega-spalten{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 24px; }
  .rm-mega-kacheln{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  /* Der Titel darf hier zweizeilig sein, ohne dass die Haarlinien verspringen;
     die feste Mindesthoehe von 50px passt dann nicht mehr. */
  .rm-mega-group-title{ min-height:0; padding-bottom:10px; margin-bottom:12px; }
  .elementor-kit-5 .rm-mega-kachel, .rm-mega-kachel{
    min-height:56px; padding:12px 14px; font-size:16px; gap:10px; }
  .elementor-kit-5 .rm-mega-col a, .rm-mega-col a{ font-size:16px; padding:7px 0; }
  .rm-mega-cta{ padding:22px; }
  .rm-mega-cta .rm-mega-group-title{ font-size:21px; }
}

/* Mobile/Tablet: siehe Abschnitt 20 (Mobilmenue als Schublade) */
@media (min-width:1025px){ .rm-mega-mobile{ display:none !important; } }


/* Native-Widget-Helfer */
.rm-abs-deco{ position:absolute !important; inset:0; pointer-events:none; }
.rm-abs-deco .elementor-widget-container{ position:static; }
.rm-card-hover{ transition:transform var(--rm-t-base), box-shadow var(--rm-t-base); }
@media (hover:hover){ .rm-card-hover:hover{ transform:translateY(-2px); }
  .rm-card-hover:hover .elementor-widget-icon-box{ box-shadow:var(--rm-shadow-hover); } }
.rm-btn-row-native{ align-items:center; }

/* ---------- 10. Bewegung aus, wenn gewuenscht ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ transition:none !important; animation:none !important; }
}


/* ---------- 14. Leistungsfilter (JetSmartFilters-Checkboxen als Design-Chips) ----------
   JetSmartFilters' public.css setzt mit .jet-checkboxes-list .jet-checkboxes-list__item
   .jet-checkboxes-list__button {display:flex;width:100%;border-color:#ccc} (0,3,0) —
   deshalb hier dieselbe Kette plus Kit- und Filterklasse (0,5,0/0,6,0). Geometrie muss
   zentral sein: das Widget bietet nur Farben und Radius als Controls. Design: Pille
   44px hoch, Innenabstand 0 20px, Hairline, 16px/600, aktiv = Anthrazit. */
.elementor-kit-5 .rm-leistungsfilter .jet-checkboxes-list{
  display:flex; flex-wrap:wrap; gap:12px; margin:0; padding:0; }
.elementor-kit-5 .rm-leistungsfilter .jet-checkboxes-list-wrapper{
  display:flex; flex-wrap:wrap; gap:12px; border:0; margin:0; padding:0; }
.elementor-kit-5 .rm-leistungsfilter .jet-checkboxes-list .jet-checkboxes-list__row{
  margin:0; width:auto; flex:0 0 auto; }
.elementor-kit-5 .rm-leistungsfilter .jet-checkboxes-list .jet-checkboxes-list__item,
.elementor-kit-5 .rm-regionsfilter .jet-radio-list__item{
  margin:0; width:auto; cursor:pointer; }
/* Nativen Haken visuell ausblenden, Tastaturfokus bleibt bedienbar */
.elementor-kit-5 .rm-leistungsfilter .jet-checkboxes-list__input{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.elementor-kit-5 .rm-leistungsfilter .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__button,
.elementor-kit-5 .rm-regionsfilter .jet-radio-list__button{
  display:inline-flex; width:auto; align-items:center; justify-content:center;
  min-height:44px; padding:0 20px;
  border:1px solid var(--rm-hairline); border-radius:999px;
  background:var(--rm-white); color:var(--rm-text);
  font-family:var(--rm-font-text); font-size:16px; font-weight:600; line-height:1.2;
  transition:background-color var(--rm-t-base), color var(--rm-t-base), border-color var(--rm-t-base);
}
.elementor-kit-5 .rm-leistungsfilter .jet-checkboxes-list .jet-checkboxes-list__item:hover .jet-checkboxes-list__button{
  border-color:var(--rm-anthra); }
/* Aktiver Chip */
.elementor-kit-5 .rm-leistungsfilter .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button,
.elementor-kit-5 .rm-leistungsfilter .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__input:checked ~ .jet-checkboxes-list__button{
  background:var(--rm-anthra); border-color:var(--rm-anthra); color:var(--rm-white); }
.elementor-kit-5 .rm-leistungsfilter .jet-checkboxes-list__input:focus-visible + .jet-checkboxes-list__button{
  box-shadow:var(--rm-focus-light); }
.elementor-kit-5 .rm-leistungsfilter .jet-checkboxes-list__label,
.elementor-kit-5 .rm-regionsfilter .jet-radio-list__label{ white-space:nowrap; }

/* Ergebnisliste unter der Karte: nur sichtbar, wenn gefiltert wird (Snippet RM 11) */
.rm-hidden{ display:none !important; }

/* ---------- 15. Stellenfinder-Filter (JSF-Selects) ----------
   Das Select-Widget bringt keine Breiten-/Hoehen-Controls mit; Geometrie daher
   zentral. Design: Eingabefeld 44px, Radius 4px, Hairline, Mulish 17px. */
.elementor-kit-5 .rm-stellenfilter .jet-select__control,
.elementor-kit-5 .rm-stellenfilter select{
  width:100%; min-height:44px; padding:10px 14px;
  border:1px solid var(--rm-hairline); border-radius:4px;
  background-color:var(--rm-white); color:var(--rm-text);
  font-family:var(--rm-font-text); font-size:17px; line-height:1.3;
}
.elementor-kit-5 .rm-stellenfilter .jet-filter-label{
  display:block; margin-bottom:6px;
  font-family:var(--rm-font-text); font-weight:700; font-size:15px; color:var(--rm-anthra); }
.elementor-kit-5 .rm-stellenfilter select:focus-visible{
  outline:none; box-shadow:var(--rm-focus-light); border-color:var(--rm-anthra); }


/* ---------- 16. Filialsuche (JSF-Suchfilter) im Design-Look ----------
   Vorlage: Suchpille aus dem Design-Export (weisse Pille, Lupe links, randloses
   Feld, orange Pille als Button). DOM: .jet-search-filter > __input-wrapper +
   __submit (Button ist Geschwister, nicht Kind). Das Widget bietet nur Farben
   und Radien als Controls, Geometrie und Lupe daher zentral. */
.elementor-kit-5 .rm-filialsuche .jet-search-filter{
  position:relative; display:flex; align-items:center; gap:8px;
  width:100%; max-width:30rem; min-height:0; height:auto;
  background:var(--rm-white); border-radius:999px;
  padding:6px 6px 6px 22px;
}
/* 23.09.2026: Die Lupe links wurde entfernt. Ihr Zeichen stand seit jeher als
   Steuerzeichen statt als CSS-Escape in der Datei (content:"002"), sie hat
   also nie gerendert — sichtbar blieb nur ein leeres Polster von 48px, das der
   Nutzer zu Recht beanstandet hat. Polster jetzt 22px, passend zur Pille. */
.elementor-kit-5 .rm-filialsuche .jet-search-filter__input-wrapper{
  flex:1 1 auto; min-width:0; margin:0; padding:0; background:transparent; border:0; }
.elementor-kit-5 .rm-filialsuche .jet-search-filter__input{
  width:100%; height:48px; min-height:48px;
  border:0; background:transparent; box-shadow:none; outline:none;
  padding:0; margin:0;
  font-family:var(--rm-font-text); font-size:18px; color:var(--rm-anthra);
}
.elementor-kit-5 .rm-filialsuche .jet-search-filter__input::placeholder{
  color:var(--rm-text-muted); opacity:1; }
.elementor-kit-5 .rm-filialsuche .jet-search-filter__input::-webkit-search-cancel-button{
  -webkit-appearance:none; appearance:none; }
.elementor-kit-5 .rm-filialsuche .jet-search-filter__submit{
  flex:0 0 auto; min-height:48px; margin:0; padding:12px 32px; border:0; border-radius:999px;
  background:var(--rm-orange); color:var(--rm-anthra);
  font-family:var(--rm-font-text); font-weight:600; font-size:18px; line-height:1;
  cursor:pointer; transition:background-color var(--rm-t-base);
}
.elementor-kit-5 .rm-filialsuche .jet-search-filter__submit:hover{
  background:var(--rm-orange-hover); color:var(--rm-anthra); }
.elementor-kit-5 .rm-filialsuche .jet-search-filter__submit-text{
  font:inherit; color:inherit; }
/* Auf hellem Grund die Hairline wie im Design */
/* 23.09.2026: Die weisse Pille braucht auf hellem Grund immer eine Kontur, sonst
   ist sie unsichtbar (Kunde 22.09.: „Suchfeld sichtbar darstellen"). Bisher hing
   das an Klassen (.section-subtle / .rm-suche-hell), die auf /filialen/ fehlen.
   Im dunklen Kopfbild ist die Kontur nicht noetig. */
.elementor-kit-5 .rm-filialsuche .jet-search-filter{ border:1px solid var(--rm-hairline); }
.elementor-kit-5 .rm-hero .rm-filialsuche .jet-search-filter{ border:0; }
@media (max-width:767px){
  /* Designexport Mobil 390: die Pille umschliesst nur die Eingabe, die orange
     Schaltflaeche steht darunter ueber die ganze Breite. */
  .elementor-kit-5 .rm-filialsuche .jet-search-filter{
    flex-direction:column; align-items:stretch; gap:12px;
    max-width:100%; background:transparent; border:0; padding:0; }
  .elementor-kit-5 .rm-filialsuche .jet-search-filter__input-wrapper{
    background:var(--rm-white); border-radius:999px; padding:4px 4px 4px 20px; }
  .elementor-kit-5 .rm-filialsuche .jet-search-filter__input-wrapper{
    border:1px solid var(--rm-hairline); }
  .elementor-kit-5 .rm-hero .rm-filialsuche .jet-search-filter__input-wrapper{ border:0; }
  .elementor-kit-5 .rm-filialsuche .jet-search-filter__input{
    height:52px; min-height:52px; font-size:17px; }
  .elementor-kit-5 .rm-filialsuche .jet-search-filter__submit{
    width:100%; min-height:52px; padding:14px 24px; font-size:18px; }
}

/* ---------- 17. Regionsfilter (Zeilen wie im Design) ----------
   Zwei Spalten: links die Filterzeilen (JSF), rechts Zahl + Icon-Link.
   Gleiche Zeilenhoehe 44px, damit beide Spalten Zeile fuer Zeile passen. */
.elementor-kit-5 .rm-regionsfilter .jet-checkboxes-list,
.elementor-kit-5 .rm-regionsfilter .jet-checkboxes-list-wrapper{
  display:flex; flex-direction:column; gap:0; border:0; margin:0; padding:0; }
.elementor-kit-5 .rm-regionsfilter .jet-checkboxes-list__input{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.elementor-kit-5 .rm-regionsfilter .jet-checkboxes-list .jet-checkboxes-list__item{
  margin:0; width:100%; height:100%; cursor:pointer; }
.elementor-kit-5 .rm-regionsfilter .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__button{
  display:flex; align-items:center; width:100%; height:100%; min-height:0; padding:0;
  border:0; background:transparent; text-align:left;
  font-family:var(--rm-font-text); font-size:18px; line-height:1.4; color:var(--rm-link);
  transition:color var(--rm-t-base);
}
.elementor-kit-5 .rm-regionsfilter .jet-checkboxes-list .jet-checkboxes-list__item:hover .jet-checkboxes-list__button{
  color:var(--rm-link-hover); }
.elementor-kit-5 .rm-regionsfilter .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button{
  color:var(--rm-anthra); font-weight:700; }
/* Gleicher Zeilentakt in beiden Spalten: 58px, kein Gap
   (JetEngine setzt Grid-Gaps als Item-Padding um und verschiebt sonst alles). */
.elementor-kit-5 .rm-regionsfilter .jet-checkboxes-list__row,
.elementor-kit-5 .rm-regionszahlen .jet-listing-grid__item{
  position:relative; height:58px; min-height:58px; box-sizing:border-box;
  margin:0 !important; padding:0 !important;
  display:flex; align-items:center; }
/* EINE durchgehende Trennlinie je Zeile: als Pseudo-Element der rechten Spalte,
   weit nach links gezogen und von der Karte beschnitten. So haengt die Linie
   nicht an den Spaltenbreiten (Prozentbreiten lassen sonst eine Luecke). */
.elementor-kit-5 .rm-regionszahlen .jet-listing-grid__item::after{
  content:""; position:absolute; left:-1200px; right:0; bottom:0;
  border-bottom:1px solid var(--rm-hairline); pointer-events:none; }
.elementor-kit-5 .rm-regionszahlen .jet-listing-grid__item:last-child::after{ display:none; }
.elementor-kit-5 .rm-regionskarte{ overflow:hidden; }
.elementor-kit-5 .rm-regionszahlen .jet-listing-grid__items{
  display:flex; flex-direction:column; gap:0; }
/* Zahl und Icon sauber ausrichten: Zahl rechtsbuendig mit fester Spaltenbreite,
   Icon gleiche optische Achse, beide vertikal zentriert wie der Regionsname. */
/* Kette Item > .elementor > .e-con vollstaendig auf Hoehe und Mitte ziehen,
   sonst haengt Zahl/Icon oben in der 58px-Zeile. */
.elementor-kit-5 .rm-regionszahlen .jet-listing-grid__item > .elementor,
.elementor-kit-5 .rm-regionszahlen .jet-listing-grid__item .e-con,
.elementor-kit-5 .rm-regionszahlen .jet-listing-grid__item .e-con-inner{
  display:flex; flex-direction:row; align-items:center; justify-content:flex-end;
  gap:14px; width:100%; height:100%; min-height:0; padding:0; margin:0; }
.elementor-kit-5 .rm-regionszahlen .jet-listing-dynamic-field{
  min-width:2.5ch; text-align:right; line-height:1; }
.elementor-kit-5 .rm-regionszahlen .jet-listing-dynamic-link{ line-height:1; display:flex; }
.elementor-kit-5 .rm-regionszahlen .jet-listing-dynamic-link__link{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; }
.elementor-kit-5 .rm-regionszahlen .jet-listing-dynamic-link__icon{ margin:0; }
/* Beide Spalten stossen aneinander, damit die Hairline als EINE Linie durchlaeuft
   (Prozentbreiten lassen sonst ~20px Rest zwischen den Spalten). */
.elementor-kit-5 .rm-regionszeile{ display:flex; flex-wrap:nowrap; gap:0; }
.elementor-kit-5 .rm-regionszeile > .e-con:first-child{ flex:1 1 auto; width:auto; max-width:none; }
.elementor-kit-5 .rm-regionszeile > .e-con:last-child{ flex:0 0 auto; width:auto; max-width:none; }

/* Regionsname etwas Luft nach rechts, damit Name und Zahl nicht kleben */
.elementor-kit-5 .rm-regionsfilter .jet-checkboxes-list__row{ padding-right:12px !important; }



/* ---------- 18. Stellenkachel: Hoehe aus dem Inhalt ----------
   Frueher stand hier eine feste Kartenhoehe von 360px, damit auch ueber Zeilen
   hinweg alles gleich hoch ist. Bei kurzen Anzeigen blieb darunter viel
   Leerflaeche. Jetzt gleicht JetEngines equal_columns_height die Kacheln je
   Zeile aus, die Karte fuellt diese Hoehe, „Stelle ansehen" bleibt unten.
   Der Titel darf so lang sein, wie er ist (kein Abschneiden auf zwei Zeilen). */
.elementor-kit-5 .rm-stellenkachel{ justify-content:space-between; height:100%; }
.elementor-kit-5 .jet-listing-grid--479 .jet-listing-grid__item > *,
.elementor-kit-5 .jet-listing-grid--479 .elementor-479{ height:100%; }


/* ---------- 19. Filialkacheln: alle gleich hoch ----------
   Die Filialfotos haben unterschiedliche Seitenverhaeltnisse. Bildhoehe daher
   fix mit object-fit (kein Verzerren), Textblock waechst nicht ueber die
   Kartenhoehe hinaus, „Zur Filiale" sitzt unten. Kartenhoehe kommt aus den
   Widget-Einstellungen (360px). */
.elementor-kit-5 .rm-kachelbild img,
.elementor-kit-5 .rm-filialkachel .jet-listing-dynamic-image img{
  display:block; width:100%; max-width:100%; height:180px;
  object-fit:cover; object-position:center; border-radius:0; }
/* Bild-Wrapper der Kachel auf volle Kartenbreite (JetEngine setzt flex) */
.elementor-kit-5 .rm-kachelbild,
.elementor-kit-5 .rm-kachelbild .jet-listing-dynamic-image{ width:100%; display:block; }
.elementor-kit-5 .rm-filialkachel{ justify-content:flex-start; height:100%; }
/* Textblock der Kachel: Ort einzeilig, Adresse hoechstens zwei Zeilen */
.elementor-kit-5 .rm-filialkachel h3{
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }


/* ---------- 20. Mobilmenue (Schublade) ----------
   Bis 1024px ersetzt die Schublade die Mega-Leiste. Aufbau kommt aus RM 05:
   Zeile mit Hauptpunkt + Aufklapp-Schaltflaeche, darunter die Gruppen der
   zweiten Ebene mit ihren Links, unten die Aktionsboxen des Menues.
   Farben und Schriften wie im Designsystem (dunkle Flaeche, Orange als Akzent). */
/* Menuetaste: exakt der Kreis aus dem Designexport (48x48, orange, dunkles
   Symbol). Kit-Selektor, sonst gewinnen die allgemeinen Button-Regeln des Kits
   (Rahmen, Radius 3px, transparenter Grund). */
.elementor-kit-5 .rm-mega-toggle,
.rm-mega-toggle{
  display:none; align-items:center; justify-content:center;
  flex:0 0 auto; box-sizing:border-box;
  width:48px; height:48px; min-width:48px; min-height:48px; padding:0;
  border:0; border-radius:999px; line-height:1;
  background:var(--rm-orange); color:var(--rm-anthra); font-size:20px; cursor:pointer;
  transition:background-color var(--rm-t-base); }
.elementor-kit-5 .rm-mega-toggle:hover,
.rm-mega-toggle:hover{ background:var(--rm-orange-hover); color:var(--rm-anthra); }
.elementor-kit-5 .rm-mega-toggle:focus-visible{ outline:none; box-shadow:var(--rm-focus, 0 0 0 3px rgba(244,120,32,.45)); }
.rm-mega-mobile{ display:none; }

@media (max-width:1024px){
  .rm-mega-bar{ display:none !important; }
  .elementor-kit-5 .rm-mega-toggle, .rm-mega-toggle{ display:flex; }
  .rm-mega{ position:static; }

  /* Schublade */
  .rm-mega.rm-open .rm-mega-mobile{ display:block; }
  .rm-mega-mobile{
    position:fixed; left:0; right:0; top:var(--rm-mm-top,0px); bottom:0; z-index:9999;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    background:var(--rm-anthra-deep); padding:8px 20px 32px;
    font-family:var(--rm-font-text); }

  .rm-mm-item{ border-bottom:1px solid rgba(255,255,255,.14); }
  .rm-mm-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .rm-mm-row > a{
    flex:1 1 auto; display:block; padding:16px 0;
    font-family:var(--rm-font-display); font-style:italic; font-weight:900;
    text-transform:uppercase; font-size:20px; line-height:1.1; color:#fff; }
  .rm-mm-row > a[aria-current="page"]{ color:var(--rm-orange); }
  .rm-mm-more{
    flex:0 0 auto; width:44px; height:44px; border:1px solid rgba(255,255,255,.28);
    border-radius:999px; background:transparent; color:#fff; font-size:15px;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:transform var(--rm-t-base), background-color var(--rm-t-base); }
  .rm-mm-more:hover{ background:rgba(255,255,255,.10); }
  .rm-mm-item.rm-auf .rm-mm-more{ transform:rotate(180deg); background:var(--rm-orange);
    border-color:var(--rm-orange); color:var(--rm-anthra); }

  .rm-mm-sub{ display:none; padding:4px 0 20px; }
  .rm-mm-item.rm-auf .rm-mm-sub{ display:block; }
  .rm-mm-grp{
    margin:14px 0 6px; font-family:var(--rm-font-display); font-style:italic;
    font-weight:500; text-transform:uppercase; letter-spacing:.06em;
    font-size:14px; color:var(--rm-orange); }
  .rm-mm-sub a{
    display:block; padding:11px 0 11px 14px; border-left:2px solid rgba(255,255,255,.16);
    font-size:17px; line-height:1.35; color:#e6e8ec; }
  .rm-mm-sub a:hover, .rm-mm-sub a:focus{ color:#fff; border-left-color:var(--rm-orange); }
  .rm-mm-sub a.rm-strong{ font-weight:700; color:#fff; }

  .rm-mm-cta{ display:flex; flex-direction:column; gap:12px; padding:24px 0 8px; }
  .rm-mm-cta p{ margin:0; font-size:16px; line-height:1.5; color:var(--rm-quiet); }
  .rm-mm-cta .rm-mm-cta-titel{
    font-family:var(--rm-font-display); font-style:italic; font-weight:900;
    text-transform:uppercase; font-size:22px; color:#fff; }
  .rm-mm-cta .btn-primary, .rm-mm-cta .btn-secondary{
    display:flex; align-items:center; justify-content:center; min-height:52px;
    padding:14px 24px; border-radius:999px; font-weight:600; font-size:18px; }
  .rm-mm-cta .btn-secondary{ border:2px solid #fff; color:#fff; background:transparent; }
  .rm-mm-cta .btn-secondary:hover{ background:#fff; color:var(--rm-anthra); }

  .rm-mm-schliessen{
    display:flex; align-items:center; gap:10px; margin:4px 0 8px; padding:10px 0;
    border:0; background:transparent; color:var(--rm-quiet);
    font-family:var(--rm-font-text); font-size:16px; cursor:pointer; }
  .rm-mm-schliessen:hover{ color:#fff; }
  body.rm-menu-offen{ overflow:hidden; }
}

/* Schaltflaechen: Designexport Mindesthoehe 48px (Desktop/Tablet) und 52px (Mobil),
   jeweils inklusive der 2px Outline. */
.elementor-kit-5 .elementor-widget-button .elementor-button{
  box-sizing:border-box; min-height:48px;
  display:inline-flex; align-items:center; justify-content:center; }
@media (max-width:767px){
  .elementor-kit-5 .elementor-widget-button .elementor-button{ min-height:52px; }
}

/* Servicezeile: die Filialzeile kommt aus dem Shortcode RM 15, daher hier die
   Schrift des Designexports (16px, gedaempft) statt aus einem Text-Widget. */
.elementor-kit-5 .rm-servicezeile,
.elementor-kit-5 .rm-servicezeile p{
  margin:0; font-family:var(--rm-font-text); font-size:16px; line-height:1.5;
  color:var(--rm-quiet); }
@media (max-width:767px){
  .elementor-kit-5 .rm-servicezeile{ font-size:15px; }
}

/* ---------- 21a. Stellenanzeige: Eckdatenkarte laeuft mit ----------
   Die Karte bleibt beim Lesen sichtbar; unter 1025px steht sie wieder im Fluss. */
.elementor-kit-5 .rm-stelle-karte{ position:sticky; top:130px; align-self:start; }
@media (max-width:1024px){
  .elementor-kit-5 .rm-stelle-karte{ position:static; }
}

/* ---------- 21. Stellenanzeige ----------
   Der Anzeigentext steht in einer Lesespalte, sonst laufen Aufzaehlungen und
   ihre Trennlinien ueber die volle Seitenbreite. Linksbuendig unter dem Titel. */
.elementor-kit-5 .rm-stelle-inhalt > .e-con-inner{ max-width:56rem; margin-inline:0; }
.elementor-kit-5 .rm-stelle-inhalt h2{ margin-top:2.5rem; }
.elementor-kit-5 .rm-stelle-inhalt h2:first-child{ margin-top:0; }
@media (max-width:1024px){
  .elementor-kit-5 .rm-stelle-inhalt > .e-con-inner{ max-width:none; }
}

/* ---------- 22. Kopfnavigation: acht Hauptpunkte muessen passen ----------
   Die Kopfzeile ist ein boxed Container (hoechstens 1440px). Zwischen Logo und
   Schaltflaeche bleibt je nach Fensterbreite unterschiedlich viel Platz, deshalb
   wachsen Schrift, Innenabstand und Logo stufenlos mit (clamp) statt in Stufen.
   Unter 1200px weicht zusaetzlich die Schaltflaeche „Filiale finden"; jedes Panel
   enthaelt ohnehin eine eigene Aktion. */
@media (min-width:1025px){
  .elementor-kit-5 .rm-header-main > .e-con-inner{ gap:clamp(10px, 1.2vw, 24px); }
  .elementor-kit-5 .rm-header-main .elementor-widget-shortcode{ flex:1 1 auto; min-width:0; }
  .elementor-kit-5 .rm-mega-bar{
    display:flex; flex-wrap:nowrap; gap:0; justify-content:center; }
  .elementor-kit-5 .rm-mega-bar > li > a{
    padding:0 clamp(3px, 0.5vw, 12px);
    font-size:clamp(13px, 1.02vw, 16px);
    gap:5px; white-space:nowrap; }
  .elementor-kit-5 .rm-mega-bar > li > a i{ font-size:0.62em; }
  /* Elementor setzt die Logobreite je Widget mit hoeherer Spezifitaet.
     04.09.2026: Der Kunde fand das Logo zu klein — Untergrenze 170, Obergrenze
     300 Pixel. Geprueft bei 1025, 1280 und 1440 Pixeln: die acht Menuepunkte
     stehen weiterhin ohne Umbruch in einer Zeile. Die Datei selbst ist 366 px
     breit; groesser wird sie erst mit einer neuen Vorlage (SVG). */
  .elementor-kit-5 .rm-header-main .elementor-widget-image img{
    width:clamp(170px, 16vw, 300px) !important; }
  .elementor-kit-5 .rm-header-main .elementor-widget-button .elementor-button{
    padding:12px clamp(14px, 1.4vw, 32px); font-size:clamp(15px, 1.1vw, 18px);
    white-space:nowrap; }
}
@media (min-width:1025px) and (max-width:1279px){
  /* zwischen 1025 und 1280 reicht der Platz nur ohne die Schaltflaeche */
  .elementor-kit-5 .rm-header-main .elementor-widget-button{ display:none; }
}

/* 23 Ueberschriften brechen nie in die Nachbarspalte -------------------------
   Lange Komposita (WINTERREIFENWECHSEL) sind breiter als eine 36-Prozent-Spalte.
   Die Groesse waehlt der Bauplan passend zur Spaltenbreite; diese Regel ist die
   Sicherung, damit sich Ueberschrift und Text unter keinen Umstaenden ueberlagern. */
.elementor-kit-5 h1, .elementor-kit-5 h2, .elementor-kit-5 h3,
.elementor-kit-5 .elementor-heading-title{
  /* Kein hyphens:auto — sonst trennt der Browser BE-RATUNG mitten im Wort,
     obwohl das Wort in die naechste Zeile passt. break-word greift nur, wenn
     ein einzelnes Wort breiter ist als die ganze Spalte. */
  overflow-wrap:break-word; word-break:normal; hyphens:manual; }
.elementor-kit-5 .e-con{ min-width:0; }

/* 24 Textspalte neben einem Bild ------------------------------------------------
   Alle Abstaende wie ueberall sonst, nur die letzte Zeile (Schaltflaechen) sitzt
   buendig mit der Unterkante der Bildspalte. */
.elementor-kit-5 .rm-spalte-unten{ justify-content:flex-start; }
.elementor-kit-5 .rm-spalte-unten > .elementor-element:last-child{ margin-top:auto; }
@media (max-width:1024px){
  .elementor-kit-5 .rm-spalte-unten > .elementor-element:last-child{ margin-top:0; }
}

/* 25 Karte: Marker und Cluster in den Logofarben --------------------------------
   Einzelne Filiale = Orange (#F47820), Bündel mehrerer Filialen = Blau (#0077C7)
   mit weisser Zahl. Leaflet.markercluster bringt sonst gruen, gelb und orange
   nach Anzahl mit. */
/* JetEngine faerbt den Pfad selbst ueber currentColor und laedt sein CSS nach
   dem Kit: deshalb color setzen und die Fuellung erzwingen. */
.elementor-kit-5 .jet-map-marker,
.elementor-kit-5 .jet-map-marker svg{ color:#F47820; }
.elementor-kit-5 .jet-map-marker svg,
.elementor-kit-5 .jet-map-marker svg path,
.elementor-kit-5 .jet-map-marker svg circle,
.elementor-kit-5 .jet-map-marker svg g{ fill:#F47820 !important; }
.elementor-kit-5 .marker-cluster,
.elementor-kit-5 .marker-cluster-small,
.elementor-kit-5 .marker-cluster-medium,
.elementor-kit-5 .marker-cluster-large{ background:rgba(0,119,199,0.28); }
.elementor-kit-5 .marker-cluster div,
.elementor-kit-5 .marker-cluster-small div,
.elementor-kit-5 .marker-cluster-medium div,
.elementor-kit-5 .marker-cluster-large div{
  background:#0077C7; color:#FFFFFF;
  font-family:var(--rm-font-text, 'Mulish'), sans-serif; font-weight:700; }
.elementor-kit-5 .marker-cluster span{ line-height:30px; }

/* 26 Filialseite: Zeile „Zur Region · Alle 45 Filialen" ------------------------
   Die Verweise stehen nebeneinander und brechen nicht mehr mitten im Namen; der
   zweite Verweis wuchs vorher auf die ganze Restbreite und quetschte den ersten
   auf 80px. */
.elementor-kit-5 .rm-filiallinks{ flex-wrap:wrap; }
.elementor-kit-5 .rm-filiallinks > *{ flex:0 0 auto; white-space:nowrap; }
/* Der zweite Verweis steckt in einem Container; ohne width:auto war die ganze
   Zeile klickbar (851px breite Flaeche). */
.elementor-kit-5 .rm-filiallinks > .e-con{ width:auto; }

/* 27 Ansprechpartner-Karten gleich hoch ----------------------------------------
   Das Listing gleicht die Zeilenhoehe aus; die Karte selbst muss diese Hoehe
   ausfuellen, sonst haengt die kuerzere Karte in der Luft. */
.elementor-kit-5 .jet-listing-grid--550 .jet-listing-grid__item > *,
.elementor-kit-5 .jet-listing-grid--550 .elementor-550,
.elementor-kit-5 .rm-personenkarte{ height:100%; }
/* Durchwahl und eigene Adresse stehen nur in der Karte, wenn sie von der
   Filialnummer abweichen (Callbacks rm_ap_tel / rm_ap_mail). Der Callback gibt
   dann einen leeren Text zurueck; „hide_if_empty" von JetEngine greift dabei
   nicht, weil das Meta-Feld selbst gefuellt ist. Deshalb hier ausblenden. */
.elementor-kit-5 .rm-personenkarte
  .elementor-widget-jet-listing-dynamic-field:not(:has(.jet-listing-dynamic-field__content:not(:empty))){
  display:none; }

/* 28 Kasten „Unsere Regionen": Filter sieht aus wie eine Textliste ------------
   Die Namen sind der Regionsfilter (er schaltet Karte und Filialliste). Kästchen
   und Haken sind ausgeblendet, die Zeile liest sich wie vorher:
   „Bayern (26 Filialen) ↗". Einzahl und Verweissymbol kommen aus Snippet RM 21. */
.elementor-kit-5 .rm-regionsfilter .jet-checkboxes-list__decorator,
.elementor-kit-5 .rm-regionsfilter .jet-radio-list__decorator{ display:none !important; }
.elementor-kit-5 .rm-regionsfilter .jet-checkboxes-list__item{
  display:block; margin:0; cursor:pointer; }
.elementor-kit-5 .rm-regionsfilter .jet-checkboxes-list__button{
  display:flex; align-items:center; gap:8px; min-height:44px; padding:0; }
.elementor-kit-5 .rm-regionsfilter .jet-checkboxes-list__label{
  color:#0077C7; font-family:var(--rm-font-text,'Mulish'),sans-serif;
  font-size:1.125rem; font-weight:600; line-height:1.4; }
.elementor-kit-5 .rm-regionsfilter .jet-checkboxes-list__item:hover
  .jet-checkboxes-list__label,
.elementor-kit-5 .rm-regionsfilter .jet-radio-list__item:hover
  .jet-radio-list__label{ color:#002652; text-decoration:underline; }
.elementor-kit-5 .rm-regionsfilter .jet-filters-counter{
  color:#4D4D4D; font-family:var(--rm-font-text,'Mulish'),sans-serif;
  font-size:1.125rem; font-weight:400; }
/* gewählte Region: kräftig, damit man den aktiven Filter sieht */
.elementor-kit-5 .rm-regionsfilter .jet-checkboxes-list__input:checked
  ~ .jet-checkboxes-list__button .jet-checkboxes-list__label,
.elementor-kit-5 .rm-regionsfilter .jet-radio-list__input:checked
  ~ .jet-radio-list__button .jet-radio-list__label{
  color:#151A22; font-weight:700; }
.elementor-kit-5 .rm-regionsfilter .rm-region-link{
  margin-left:auto; color:#0077C7; font-size:15px; line-height:1; }
.elementor-kit-5 .rm-regionsfilter .rm-region-link:hover{ color:#002652; }

/* ---------- 29. Herstelleraktionen: Motiv ueber der Karte (04.09.2026) ----------
   Der Kunde moechte je Aktion eine Bilddatei und einen Link (Snippet RM 26).
   Das Bild sitzt buendig auf der Karte, immer im gleichen Seitenverhaeltnis,
   damit die Karten in einer Zeile gleich hoch bleiben.

   15.09.2026: Seitenverhaeltnis auf 4:5 geaendert (Vorgabe). Die Motive der
   Hersteller sind Flyer im Hochformat; bei 16:9 waeren sie oben und unten
   beschnitten.

   16.09.2026, zweite Fassung: Die Bildflaeche ist in allen Karten gleich hoch
   (4:5), damit Logo und Titel auf einer Linie stehen — sonst rutschen sie in
   jeder Karte anders, und die Reihe wirkt unruhig.

   Beschnitten wird trotzdem nichts: `object-fit:contain` passt das Motiv in den
   Rahmen ein, statt es zu fuellen. Auf den Motiven steht Text bis an den Rand;
   `cover` wuerde ihn anschneiden. Die 25 Motive sind ohnehin auf 4:5 gebracht,
   die Regel ist die Sicherung fuer alles, was spaeter hochgeladen wird. */
.rm-aktion{ display:flex; flex-direction:column; overflow:hidden; }
.rm-aktion-bildrahmen{ margin:0; line-height:0; background:#F2F2F2; }
.rm-aktion-bildrahmen a{ display:block; }
img.rm-aktion-bild{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:contain;
  background:#F2F2F2; display:block; }

/* ---------- 30. Händler-Login in der oberen Leiste (04.09.2026) ----------
   Die Schaltflächenregel des Designsystems setzt jede Elementor-Schaltfläche auf
   mindestens 48 Pixel Höhe — das ist genau die Höhe der oberen Leiste. Der
   Händler-Login stand deshalb ohne Luft von Kante zu Kante und war so groß wie
   die Haupt-Aktion „Filiale finden". Hier gilt die kleinere Nebenform. */
.elementor-kit-5 .rm-haendler-login .elementor-button{
  min-height:32px; padding:5px 16px; font-size:14px; line-height:1.2; }
.elementor-kit-5 .rm-haendler-login .elementor-button i,
.elementor-kit-5 .rm-haendler-login .elementor-button svg{ font-size:0.85em; }
@media (max-width:767px){
  .elementor-kit-5 .rm-haendler-login .elementor-button{
    min-height:30px; padding:4px 12px; font-size:13px; }
}

/* ---------- 31. Schaltfläche im Seitenkopf (04.09.2026) ----------
   Der Seitenkopf (Vorlage 556) gilt für alle Seiten und enthält deshalb den
   Shortcode [rm_kopf_knopf], der nur auf Seiten mit dem Feld `kopf_knopf`
   etwas ausgibt. Auf allen anderen Seiten bleibt eine leere Hülle übrig — die
   würde im Flex-Abstand des Kopfes 20 Pixel Luft erzeugen. Diese Regel nimmt
   sie aus dem Fluss. */
.rm-kopf-knopf:has(.elementor-shortcode:empty),
.rm-kopf-knopf:empty{ display:none; }
.rm-kopf-knopf .elementor-shortcode{ margin-top:0.5rem; }

/* ---------- 32. Listen in Textblöcken (04.09.2026) ----------
   Die Rechtstexte des Kunden enthalten Aufzählungen. Ohne Regel greift die
   Browservorgabe mit fremdem Abstand; hier dieselbe Schrift und derselbe
   Zeilenabstand wie im Absatz. */
.elementor-kit-5 .elementor-widget-text-editor ul{
  margin:0.25em 0 0.25em 1.35em; padding:0; }
.elementor-kit-5 .elementor-widget-text-editor ul li{
  margin:0 0 0.5em 0; padding:0; line-height:1.6; }
.elementor-kit-5 .elementor-widget-text-editor ul li:last-child{ margin-bottom:0; }

/* ---------- 33. Rechtstexte im klassischen Editor (04.09.2026) ----------
   Impressum und Datenschutzerklärung stehen als ein Block im klassischen
   Editor, nicht als Elementor-Abschnitte. Der Inhaltsbereich der Vorlage 556
   ist absichtlich randlos (Elementor-Seiten bringen ihre eigenen Abstände
   mit), deshalb lief der klassische Text bis an den Fensterrand.

   `body:not(.elementor-page)` trifft genau die Seiten ohne Elementor-Inhalt:
   Elementor setzt die Klasse `elementor-page` nur, wenn die Seite selbst mit
   Elementor gebaut ist (geprüft am 04.09.2026: /kontakt/ hat sie,
   /datenschutz/ nicht). Elementor-Seiten bleiben damit unberührt.

   Das Widget „Beitragsinhalt" hat in Elementor 4 keinen inneren
   `.elementor-widget-container` mehr — die Absätze hängen direkt im Widget.
   Deshalb liegen Breite und Polster auf dem Widget selbst.

   Schriften wie im übrigen Aufbau (Archivo für Überschriften, Mulish für den
   Text). Die Stufen h3 und h4 stehen bewusst nicht in Versalien-Archivo: bei
   28 Zwischenüberschriften wäre das eine Wand. Zwischen den Blöcken wirkt nur
   der Zeilenrhythmus, keine leeren Flächen. */
/* Dieselbe Kante wie Kopf und Fuß.

   Kopf und Fuß sind „boxed" Container mit 48 px Seitenpolster und einem
   Inhaltskasten von höchstens 1440 px. Elementor rechnet dabei zweistufig:
   erst Polster, dann den Kasten darin zentrieren. Für ein einzelnes Widget
   ergibt dieselbe Kante: 48 px Polster und eine Höchstbreite von
   1440 + 2 x 48 = 1536 px.

   Nachgemessen (04.09.2026), Kante von Kopf, Fuß und Text jeweils gleich:
       1440 px Fenster ->   48,0 bis 1377,0
       1600 px Fenster ->   72,5 bis 1512,5
       1920 px Fenster ->  232,5 bis 1672,5

   Unter 1024 px greift die Höchstbreite nicht mehr, dort gelten die
   Seitenmaße des Designs (3,56 % und 5,13 %). */
body:not(.elementor-page) .elementor-element.elementor-widget-theme-post-content{
  display:block; box-sizing:border-box;
  width:100%; max-width:1536px !important;
  margin-inline:auto; padding:48px 48px 80px; }
@media (max-width:1024px){
  body:not(.elementor-page) .elementor-element.elementor-widget-theme-post-content{
    max-width:none !important; padding:40px 3.56% 64px; } }
@media (max-width:767px){
  body:not(.elementor-page) .elementor-element.elementor-widget-theme-post-content{
    padding:32px 5.13% 56px; } }

/* Keine Zeilenlängenbegrenzung: Vorgabe vom 04.09.2026 ist die volle
   Spaltenbreite, die Textkante schliesst mit der Kante der Kaesten ab. */

body:not(.elementor-page) .elementor-widget-theme-post-content h2{
  font-family:'Archivo',Arial,sans-serif; font-weight:900; font-style:italic;
  text-transform:uppercase; font-size:36px; line-height:1.05;
  color:var(--rm-anthra); margin:48px 0 16px; }
body:not(.elementor-page) .elementor-widget-theme-post-content h3{
  font-family:'Mulish',Arial,sans-serif; font-weight:700; font-style:normal;
  text-transform:none; font-size:24px; line-height:1.25;
  color:var(--rm-anthra); margin:32px 0 10px; }
body:not(.elementor-page) .elementor-widget-theme-post-content h4{
  font-family:'Mulish',Arial,sans-serif; font-weight:700; font-style:normal;
  text-transform:none; font-size:19px; line-height:1.3;
  color:var(--rm-anthra); margin:20px 0 8px; }
body:not(.elementor-page) .elementor-widget-theme-post-content > *:first-child{
  margin-top:0; }
body:not(.elementor-page) .elementor-widget-theme-post-content p{
  font-family:'Mulish',Arial,sans-serif; font-size:18px; line-height:1.6;
  color:var(--rm-text); margin:0 0 14px; }
body:not(.elementor-page) .elementor-widget-theme-post-content ul{
  margin:0 0 14px 1.35em; padding:0; }
body:not(.elementor-page) .elementor-widget-theme-post-content ul li{
  font-family:'Mulish',Arial,sans-serif; font-size:18px; line-height:1.6;
  color:var(--rm-text); margin:0 0 8px; }
body:not(.elementor-page) .elementor-widget-theme-post-content a{
  color:var(--rm-link); text-decoration:none; word-break:break-word; }
body:not(.elementor-page) .elementor-widget-theme-post-content a:hover{
  color:var(--rm-link-hover); text-decoration:underline; }
@media (max-width:767px){
  body:not(.elementor-page) .elementor-widget-theme-post-content h2{ font-size:30px; }
  body:not(.elementor-page) .elementor-widget-theme-post-content h3{ font-size:21px; }
  body:not(.elementor-page) .elementor-widget-theme-post-content p,
  body:not(.elementor-page) .elementor-widget-theme-post-content ul li{ font-size:17px; } }

/* ---------- 34. Markenlogo auf der Aktionskarte (04.09.2026) ----------
   „Hersteller" ist seit heute ein Auswahlfeld. Liegt in der Mediathek eine
   Datei `marke-<marke>`, zeigt die Karte das Logo an der Stelle, an der sonst
   der Markenname steht (Snippet RM 26). Feste Höhe, damit unterschiedlich
   proportionierte Logos die Karten nicht auseinanderziehen. */
/* 16.09.2026: Die Logos standen nicht auf gleicher Hoehe. Die Ursache steckte
   in der Kombination `height:28px` + `max-width:160px` + `object-fit:contain`:
   Bei breiten Marken (Metzeler 7,5:1, Bridgestone 6,7:1) griff die
   Breitengrenze zuerst, das Bild wurde hineingerechnet und war am Ende nur
   21 bis 24 Pixel hoch. Jetzt bestimmt die Hoehe die Groesse und die Breite
   folgt; die Grenze liegt so hoch, dass sie nie zuerst greift (das breiteste
   Logo misst bei 28 Pixel Hoehe rund 213 Pixel). */
.rm-aktion-marke{ display:flex; align-items:center; height:28px; line-height:0; }
.rm-aktion-marke img{
  height:28px; width:auto; max-width:230px; object-fit:contain;
  object-position:left center; }
@media (max-width:767px){
  .rm-aktion-marke{ height:24px; }
  .rm-aktion-marke img{ height:24px; max-width:200px; }
}

/* ---------- 35. Herstelleraktionen: Bereichsfilter und Leuchtkasten (16.09.2026) ----------
   Vorgabe des Kunden: „Wie auf der aktuellen Website – folgende
   Auswahlmoeglichkeiten als Buttons bzw. Kategorien einfuegen." Die
   Schaltflaechen sehen aus wie die Chips im Leistungs- und Regionsfilter
   (Abschnitt 14) — gleiche Geometrie, gleiche Farben. Es ist derselbe
   Bedienbaustein, also soll er nicht anders aussehen, nur weil er hier von
   einem Snippet kommt und dort von JetSmartFilters.

   Die Zahl in der Schaltflaeche nennt die Aktionen im Bereich. Bereiche ohne
   Aktion bleiben sichtbar und anklickbar: Der Kunde soll sehen, dass es sie
   gibt, und der Hinweistext erklaert, warum dort nichts steht. */
.elementor-kit-5 .rm-aktionsfilter{
  display:flex; flex-wrap:wrap; gap:12px; margin:0 0 32px; padding:0; }
.elementor-kit-5 .rm-af-knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:44px; padding:0 20px;
  border:1px solid var(--rm-hairline); border-radius:999px;
  background:var(--rm-white); color:var(--rm-text);
  font-family:var(--rm-font-text); font-size:16px; font-weight:600; line-height:1.2;
  cursor:pointer;
  transition:background-color var(--rm-t-base), color var(--rm-t-base), border-color var(--rm-t-base);
}
.elementor-kit-5 .rm-af-knopf:hover{ border-color:var(--rm-anthra); }
.elementor-kit-5 .rm-af-knopf.is-aktiv{
  background:var(--rm-anthra); border-color:var(--rm-anthra); color:var(--rm-white); }
.elementor-kit-5 .rm-af-knopf:focus-visible{ box-shadow:var(--rm-focus-light); outline:none; }
.elementor-kit-5 .rm-af-zahl{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:24px; height:24px; padding:0 7px; border-radius:999px;
  background:var(--rm-surface-subtle); color:var(--rm-text-muted);
  font-size:14px; font-weight:700; line-height:1; }
.elementor-kit-5 .rm-af-knopf.is-aktiv .rm-af-zahl{
  background:rgba(255,255,255,.18); color:var(--rm-white); }
/* Bereich ohne Aktion: leiser, aber bedienbar */
.elementor-kit-5 .rm-af-knopf.rm-af-leer{ color:var(--rm-text-muted); }

/* Ohne diese Regel filtert nichts. Das Skript setzt `hidden` auf der Karte,
   aber Abschnitt 29 gibt `.rm-aktion` ein `display:flex` mit — und die Regel
   aus diesem Stylesheet schlaegt das `[hidden]{display:none}` des Browsers:
   gleiche Spezifitaet (0,1,0), spaetere Quelle gewinnt. Die Karte blieb also
   sichtbar, obwohl `hidden` gesetzt war. */
.elementor-kit-5 .rm-aktion[hidden]{ display:none !important; }

.elementor-kit-5 .rm-aktion-leer{
  margin:0 0 32px; font-family:var(--rm-font-text); font-size:17px;
  line-height:1.6; color:var(--rm-text-muted); }

/* Leuchtkasten: Auf den Motiven steht Text, deshalb der Hinweis zum Vergroessern.
   Er liegt in der Bildecke und erscheint bei Mauszeiger und Tastaturfokus;
   auf Geraeten ohne Mauszeiger steht er dauerhaft, sonst waere er dort nie zu
   sehen. */
.elementor-kit-5 a.rm-aktion-lupe{ position:relative; display:block; }
.elementor-kit-5 .rm-aktion-lupe-hinweis{
  position:absolute; right:12px; bottom:12px;
  padding:7px 14px; border-radius:999px;
  background:rgba(21,26,34,.82); color:var(--rm-white);
  font-family:var(--rm-font-text); font-size:14px; font-weight:600; line-height:1;
  opacity:0; transition:opacity var(--rm-t-base); pointer-events:none; }
.elementor-kit-5 a.rm-aktion-lupe:hover .rm-aktion-lupe-hinweis,
.elementor-kit-5 a.rm-aktion-lupe:focus-visible .rm-aktion-lupe-hinweis{ opacity:1; }
@media (hover:none){
  .elementor-kit-5 .rm-aktion-lupe-hinweis{ opacity:1; }
}

/* ---------- 36. Herstelleraktionen: Karte zusammengeklappt (16.09.2026) ----------
   Vorgabe: „Die Boxen sind zu lang — Bild, Logo und Titel sichtbar lassen, den
   Rest auf Klick zeigen."

   Achtung, gleiche Falle wie beim Filter: `.rm-aktion` traegt `display:flex`,
   und eine Regel aus diesem Stylesheet schlaegt das `[hidden]{display:none}`
   des Browsers. Fuer jedes Element, das per `hidden` verschwinden soll, braucht
   es deshalb eine eigene Zeile. */
.elementor-kit-5 .rm-aktion-fach[hidden],
.elementor-kit-5 .rm-aktion-mehr[hidden]{ display:none !important; }

.elementor-kit-5 .rm-aktion-fach{
  display:flex; flex-direction:column; gap:12px; }

/* Der Umschalter sieht aus wie ein Textlink, nicht wie eine zweite Aktion —
   die Hauptsache auf der Karte bleibt „Zur Aktion beim Hersteller".

   Es ist ein <button>, und die Theme-Style-Regel des Kits faerbt jeden Knopf
   orange: `.elementor-kit-5 button` (0,2,1 im Hover-Fall) schlaegt ein
   schlichtes `.elementor-kit-5 .rm-aktion-mehr` (0,2,0). Der Umschalter sah
   deshalb aus wie eine orange Pille quer ueber die Karte. Die Kette hier ist
   eine Stufe laenger und nennt Ruhe-, Hover- und Fokuszustand ausdruecklich —
   sonst greift beim Ueberfahren wieder das Orange des Kits. */
.elementor-kit-5 .rm-aktion .rm-aktion-mehr,
.elementor-kit-5 .rm-aktion .rm-aktion-mehr:hover,
.elementor-kit-5 .rm-aktion .rm-aktion-mehr:focus,
.elementor-kit-5 .rm-aktion .rm-aktion-mehr:active{
  display:inline-flex; align-items:center; gap:8px;
  align-self:flex-start; width:auto; min-height:0;
  margin:4px 0 0; padding:0; border:0; border-radius:4px;
  background:none; box-shadow:none;
  font-family:var(--rm-font-text); font-size:16px; font-weight:600;
  line-height:1.3; color:var(--rm-link); cursor:pointer; text-align:left; }
.elementor-kit-5 .rm-aktion .rm-aktion-mehr:hover{
  color:var(--rm-link-hover); text-decoration:underline;
  text-underline-offset:3px; }
/* Fokus nur fuer die Tastatur, und als schmaler Rahmen statt als 4px-Ring —
   auf einem Textknopf saehe der Ring des Designsystems aus wie eine Flaeche. */
.elementor-kit-5 .rm-aktion .rm-aktion-mehr:focus-visible{
  outline:2px solid var(--rm-orange); outline-offset:3px; }
.elementor-kit-5 .rm-aktion-mehr-pfeil{
  width:8px; height:8px; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform:rotate(45deg);
  margin-top:-4px; transition:transform var(--rm-t-base); }
.elementor-kit-5 .rm-aktion-mehr.is-offen .rm-aktion-mehr-pfeil{
  transform:rotate(-135deg); margin-top:2px; }

/* Zusammengeklappt stehen nur noch Logo, Titel und der Umschalter im Textteil.
   Damit die Karten einer Zeile trotzdem gleich hoch schliessen, bleibt das
   Raster zustaendig — hier wird nur der Abstand kleiner. */
.elementor-kit-5 .rm-aktion .rm-stelle-body{ gap:12px; }

/* 37 · Newsletter-Formular direkt auf der Seite ([rm_newsletter_formular]).
   Drei Felder nebeneinander, unter 768px untereinander; Eingaben erben das
   Aussehen aus .rm-form (Abschnitt Formulare). */
.rm-nl-form{ max-width:920px; display:flex; flex-direction:column; gap:20px; }
.rm-nl-felder{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.rm-nl-feld{ display:flex; flex-direction:column; gap:6px; }
.rm-nl-feld label{ font-family:'Mulish',sans-serif; font-weight:600; font-size:.9375rem; color:var(--rm-anthra); }
.rm-nl-form .rm-nl-hinweis{ margin:0; font-size:.9375rem; line-height:1.5; color:var(--rm-text-muted); max-width:760px; }
.rm-nl-form .rm-nl-hinweis a{ color:var(--rm-orange-text); text-decoration:underline; }
.elementor-kit-5 .rm-nl-form .btn-primary, .rm-nl-form .btn-primary{ align-self:flex-start; }
@media (max-width:767px){ .rm-nl-felder{ grid-template-columns:1fr; } }
/* Sprungziel des Kopf-Knopfs auf /newsletter/: der Abschnitt, nicht das
   Formular. Beim Scrollen fixiert sich die Kopfleiste mit 88px oben — der
   Abstand hält die Überschrift darunter frei. */
#anmeldung{ scroll-margin-top:104px; }

/* 38 · Hauptmenü: Hauptpunkte in Versalien und fett (18.09.2026). */
.elementor-kit-5 .rm-mega-bar > li > a{ text-transform:uppercase; font-weight:700; letter-spacing:.02em; }

/* 39 · Kopf zu Seitenbeginn über dem Kopfbild — nur Startseite (18.09.2026).
   Auf Innenseiten steht zwischen Kopf und Kopfbild die Brotkrumenleiste; dort
   bleibt der Kopf im Fluss. Auf der Startseite bleibt er ebenfalls im Fluss,
   das Kopfbild rückt um die Kopfhöhe (105px) nach oben und bekommt oben
   denselben Betrag als Innenabstand dazu. In Ruhe ist die Hauptzeile
   durchsichtig, nur ihr Inhalt steht als hellweißer Kasten in der Seitenbreite
   (nicht randabfallend). Sobald Elementor die Zeile fixiert
   (.elementor-sticky--active, beim Scrollen), gilt wieder die weiße Leiste über
   die volle Breite. Unter 1025px nichts davon — dort die Schublade. */
/* 23.09.2026: gilt jetzt auf allen Seiten mit Kopfbild, nicht mehr nur auf der
   Startseite (Kundenwunsch 22.09.). `body:has(.rm-hero)` sorgt dafuer, dass
   Seiten ohne Kopfbild (404, reine Textseiten) die weisse Leiste behalten. */
@media (min-width:1025px){
  body:has(.rm-hero) .rm-header-main:not(.elementor-sticky--active){ background:transparent !important; border-bottom:0; position:relative; z-index:30; }
  body:has(.rm-hero) .rm-header-main:not(.elementor-sticky--active) > .e-con-inner{
    background:rgba(255,255,255,.9); box-shadow:0 10px 30px rgba(11,14,19,.14);
    padding-left:24px; padding-right:24px; }
  /* 23.09.: der Abstand zwischen oberer Leiste und Kopfkasten gilt jetzt
     ueberall, nicht nur auf der Startseite -> Kopf 121px statt 105px hoch. */
  body:has(.rm-hero) .rm-header-main:not(.elementor-sticky--active){ padding-top:16px; }
  body:has(.rm-hero) .rm-hero{ margin-top:-121px; padding-top:calc(7.18% + 121px) !important; }
}

/* 40 · Schnellzugriffe am rechten Rand (RM 28). In Ruhe 60px sichtbar (das
   Symbol), Text liegt rechts außerhalb; beim Überfahren oder Fokus schiebt sich
   der Eintrag um die Textbreite nach links. */
.rm-schnell{ position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:900; display:none; }
@media (min-width:1025px){ .rm-schnell{ display:block; } }
.rm-schnell ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.rm-schnell li{ overflow:hidden; }
.rm-schnell a{ display:flex; align-items:center; gap:14px; height:56px; width:220px;
  transform:translateX(160px); transition:transform .5s cubic-bezier(.22,.61,.36,1), background-color .25s ease, color .25s ease;  /* 18.09.: langsamer, war var(--rm-t-base) */
  background:var(--rm-anthra); color:#fff; text-decoration:none;
  font-family:var(--rm-font-text); font-weight:700; font-size:15px; border-radius:8px 0 0 8px;
  box-shadow:0 6px 18px rgba(11,14,19,.25); }
.rm-schnell a:hover, .rm-schnell a:focus-visible{ transform:translateX(0); background:var(--rm-orange); color:#0B0E13; outline:none; }
.rm-schnell-symbol{ flex:0 0 60px; display:flex; align-items:center; justify-content:center; font-size:20px; }
.rm-schnell-text{ white-space:nowrap; padding-right:18px; }

/* 41 · Nachbesserung Startseiten-Kopf (18.09.2026): Luft zwischen oberer Leiste
   und Kopfkasten; Menüpunkte und „Filiale finden" kleiner, weil sie sich mit
   Versalien überlappten. Die Kopfhöhe wächst um die Luft (105 + 16 = 121px),
   das Kopfbild rückt entsprechend. */
@media (min-width:1025px){
  /* Abstand Kopf → Dachzeile war 198px; gewünscht ein Drittel (≈66). Die
     Dachzeile sitzt 96px unter der Innenkante, also Innenabstand oben 91px. */
  body.home .rm-hero{ margin-top:-121px; padding-top:91px !important; }
  .elementor-kit-5 .rm-mega-bar > li > a{ font-size:clamp(12px, .88vw, 14px); padding:0 clamp(3px, .45vw, 10px); letter-spacing:.01em; }
  /* Fünf Klassen: Elementors Vorlagen-CSS (.elementor-434 .elementor-element
     .elementor-element-… .elementor-button) hat vier und wird später geladen —
     mit gleicher Spezifität gewann es bisher, die Kopf-Knopf-Regeln griffen nie. */
  .elementor-kit-5 .rm-header-main .e-con-inner .elementor-widget-button .elementor-button{
    padding:10px clamp(12px, 1.1vw, 22px) !important; font-size:clamp(13px, .95vw, 15px) !important; min-height:0; }
}

/* 42 · Seiten mit Kopfbild, in Ruhe: das Untermenü passt sich dem Kopfkasten an. Das
   Panel ist absolut mit left/right 0 und richtet sich am nächsten
   positionierten Vorfahren aus — in Ruhe wird das der Kasten (.e-con-inner),
   beim Scrollen wieder die volle Leiste. */
@media (min-width:1025px){
  body:has(.rm-hero) .rm-header-main:not(.elementor-sticky--active) > .e-con-inner{ position:relative; }
  body:has(.rm-hero) .rm-header-main:not(.elementor-sticky--active) .rm-mega-panel{ box-shadow:0 24px 40px rgba(0,0,0,.14); }
}

/* 43 Mega-Menü: verlinkter Gruppentitel (z. B. Händlerbereich → /haendler/) */
.rm-mega-group-title a.rm-mega-group-link{color:inherit;text-decoration:none}
.rm-mega-group-title a.rm-mega-group-link:hover{color:#F47820}
.rm-mm-grp a.rm-mega-group-link{color:inherit;text-decoration:none}

/* 44 · Aktionszeitraum in der Groesse des Erklaertextes und fett (Kunde 22.09.).
   Nur in den Aktionsfaechern — .rm-stelle-meta traegt auch Stellenanzeigen. */
.rm-aktion-fach .rm-stelle-meta{ font-size:17px; font-weight:700; color:var(--rm-text); }
@media (max-width:767px){ .rm-aktion-fach .rm-stelle-meta{ font-size:16px; } }

/* 45 · Brotkrume liegt seit 23.09. im Kopfbild: kleiner, heller, mit Abstand. */
.rm-hero .e-con-inner > .e-con:first-child{ margin-bottom:8px; opacity:.95; }
.rm-hero .e-con:first-child .elementor-heading-title,
.rm-hero .e-con:first-child .jet-listing-dynamic-field__content{ font-size:14px; }



/* 47 · /filialen/: weniger Luft zwischen Kopf und Brotkrume, damit die
   Vertrauensleiste („60+ Jahre Erfahrung") ohne Scrollen sichtbar ist
   (Nutzer, 24.09.). Ueber der Brotkrume standen 302px, davon sind 121px die
   Hoehe des ueberlagernden Kopfes — die bleiben, gekuerzt wird nur der Rest.
   Bewusst nur diese Seite; andere Seiten bleiben unveraendert. */
@media (min-width:1025px){
  /* 24.09.: Abstand Kopf -> Brotkrume auf 120px (Vorgabe Nutzer). 121px davon
     traegt der ueberlagernde Kopf, der Rest ist das sichtbare Polster. */
  body.page-id-96 .rm-hero{ padding-top:calc(121px + 112px) !important; }
  body.page-id-96 .rm-hero > .e-con-inner{ padding-top:8px; --gap:1.5rem 1.5rem; }
}


/* 48 · Mega-Menue: Haarlinien der Spalten auf einer Hoehe (Nutzer, 24.09.).
   Bisher sollte eine Mindesthoehe von 50px (= zwei Zeilen) das erledigen.
   Bei 1400px Fensterbreite ist eine Spalte aber nur 196px breit, und
   „Haendlerbereich – Ihr Reifengrosshandel" braucht dort fuenf Zeilen (85px
   gemessen) — die Linie sass 48px tiefer als in den Nachbarspalten.

   Statt einer festen Zahl uebernimmt jetzt das Raster die Ausrichtung: die
   Spalten geben ihre Box auf (`display:contents`), Titel und Liste werden
   direkte Rasterfelder. Zeile 1 nimmt alle Titel auf und ist so hoch wie der
   laengste — damit liegen die Linien zwangslaeufig gleich, egal wie lang ein
   Titel ist oder ob eine Fortsetzungsspalte gar keinen hat. */
@media (min-width:1025px){
  .rm-mega-spalten{ grid-template-rows:auto auto; align-items:stretch; }
  .rm-mega-spalten > .rm-mega-col{ display:contents; }
  .rm-mega-spalten > .rm-mega-col > .rm-mega-group-title{ grid-row:1; min-height:0; align-self:end; }
  .rm-mega-spalten > .rm-mega-col > ul{ grid-row:2; align-self:start; }
}

/* 48b · Verweis nach aussen (Menueklasse `rm-extern`): kleines Symbol hinter
   dem Text, damit erkennbar ist, dass die Seite verlassen wird. Font Awesome
   ist ohnehin geladen (Mega-Menue, Kacheln). */
.rm-mega-col a.rm-extern::after,
.rm-mm-sub a.rm-extern::after{
  font-family:"Font Awesome 6 Free","Font Awesome 5 Free"; font-weight:900;
  content:"\f35d"; font-size:.78em; margin-left:.45em; vertical-align:baseline;
  opacity:.75; }

/* 48c · Stellenfinder: die Suche stand in der 480px-Breite der Filialsuche
   (gemeinsame Klasse `rm-filialsuche`). Auf /karriere/ steht sie allein in
   einer vollen Zeile und darf die Breite nutzen (Nutzer, 24.09.). */
.elementor-kit-5 .rm-stellensuche .jet-search-filter,
.rm-stellensuche .jet-search-filter{ max-width:none; }

/* 49 · Kopfbilder der Einzelansichten (Nutzer, 24.09.).

   a) Abstand: unter dem Kopf klafften 169px. Gewuenscht sind hoechstens 100px.
      Der Kopf ragt 121px in den Abschnitt hinein, der Innenabstand des
      Kopfbildes traegt den Rest. Weil der Innenabstand der inneren Box in
      Prozent gerechnet ist (und damit mit der Fensterbreite schwankt), wird er
      hier auf 0 gesetzt und der ganze Betrag oben fest vergeben — so sind es
      auf jeder Breite genau 100px.

   b) Motiv der Stellenanzeige: kommt aus dem Bereich der Stelle. RM 32 setzt
      dafuer die Klasse am `body`; wer eine Stelle anlegt und den Bereich
      waehlt, bekommt das Bild ohne weiteres Zutun. Ein Motiv tauscht man hier
      aus, nicht im Snippet. Filialen brauchen das nicht: sie haben ihr eigenes
      Beitragsbild, das die Vorlage dynamisch holt. */
@media (min-width:1025px){
  body.single-filialen .rm-hero,
  body.single-stellenangebote .rm-hero{ padding-top:calc(121px + 100px) !important; }
  body.single-filialen .rm-hero > .e-con-inner,
  body.single-stellenangebote .rm-hero > .e-con-inner{ padding-top:0; }
}
/* Lage und Groesse muessen hier mitkommen: das Bild setzt das CSS, nicht
   Elementor — ohne diese drei Zeilen kachelt der Browser es (gemeldet 25.09.). */
body.single-stellenangebote .rm-hero{
  background-image:url("https://www.reifen-mueller.com/wp-content/uploads/rm-werkstatt-012-ohne-fremdlogo.jpg");
  background-repeat:no-repeat; background-position:center center; background-size:cover; }
body.rm-bereich-werkstatt .rm-hero{
  background-image:url("https://www.reifen-mueller.com/wp-content/uploads/rm-werkstatt-012-ohne-fremdlogo.jpg"); }
body.rm-bereich-verkauf .rm-hero{
  background-image:url("https://www.reifen-mueller.com/wp-content/uploads/rm-kopf-1809-kontakt.jpg"); }
body.rm-bereich-lager .rm-hero{
  background-image:url("https://www.reifen-mueller.com/wp-content/uploads/rm-kopf-1809-unternehmen-zentrallager.jpg"); }
body.rm-bereich-verwaltung .rm-hero{
  background-image:url("https://www.reifen-mueller.com/wp-content/uploads/rm-kopf-2109gp-kontakt.jpg"); }
body.rm-bereich-fahrdienst .rm-hero{
  background-image:url("https://www.reifen-mueller.com/wp-content/uploads/rm-kopf-2109gp-flotte-ansprechpartner.jpg"); }


/* 50 · Stellenanzeige: Rhythmus im Textteil (Nutzer, 24.09.: „so bad regarding
   spacing"). Gemessen war: Zwischenueberschrift 48px gross mit 8px Abstand
   nach oben, Aufzaehlung ohne Abstand nach unten — die Ueberschrift klebte an
   der Liste darueber, und 48px neben 17px Listentext wirkten erschlagend.

   Ursache war zum Teil eine **fehlende Klasse**: `.rm-stelle-inhalt` gab es im
   CSS schon (Abschnitt 32), die Vorlage trug sie aber nicht. Sie ist jetzt
   gesetzt; hier kommt der Feinschliff dazu. */
.elementor-kit-5 .rm-stelle-inhalt h2{
  font-size:2rem; line-height:1.1; margin-top:3rem; margin-bottom:1rem; }
.elementor-kit-5 .rm-stelle-inhalt h2:first-child{ margin-top:0; }
.elementor-kit-5 .rm-stelle-inhalt .rm-leistungen{ margin:0 0 2rem; }
.elementor-kit-5 .rm-stelle-inhalt .rm-leistungen li{ padding:10px 0 10px 28px; }
.elementor-kit-5 .rm-stelle-inhalt p.rm-body{ margin:0 0 1.25rem; }
/* Fusszeile der Anzeige (Arbeitsort, Ansprechpartner): abgesetzt statt direkt
   unter dem Schlusssatz. */
.elementor-kit-5 .rm-stelle-inhalt p.rm-body-s{
  margin:2rem 0 0; padding-top:1.25rem; border-top:1px solid var(--rm-hairline);
  /* 29.09.: Der Kunde liest hier Arbeitsort und Ansprechpartner — also keine
     Nebensache. Die ruhige Farbe vom 24.09. war zu blass; die Haarlinie setzt
     die Zeile schon genug ab. */
  color:var(--rm-text); }
/* Eckdatenkarte rechts: die Paare standen zu dicht beieinander. */
.elementor-kit-5 .rm-stelle-karte > .e-con-inner{ --gap:1.25rem 1.25rem; }
@media (max-width:767px){
  .elementor-kit-5 .rm-stelle-inhalt h2{ font-size:1.625rem; margin-top:2.25rem; }
  .elementor-kit-5 .rm-stelle-inhalt .rm-leistungen{ margin-bottom:1.5rem; }
}


/* 51 · Oeffnungszeiten aus den Tagesfeldern (Shortcode [rm_zeiten], RM 34).
   Die Werte sind genau die der bisherigen Icon-Liste im Standortblock des
   Grosshandels — so sieht die Zeile gleich aus, kommt aber aus denselben
   Feldern, die auch an Google gehen. */
.elementor-kit-5 ul.rm-oz, ul.rm-oz{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.625rem; }
.elementor-kit-5 ul.rm-oz > li, ul.rm-oz > li{
  display:flex; align-items:flex-start; gap:.75rem; margin:0;
  /* Mulish, nicht var(--rm-font-text): die Nachbarspalten Adresse und Telefon
     stehen in Mulish, gemessen 17px/23.8px. --rm-font-text waere Proxima Nova
     und die Zeile faellt aus der Reihe. */
  font-family:"Mulish", sans-serif; font-weight:400; font-size:1.0625rem;
  line-height:1.4; color:var(--rm-text); }
.elementor-kit-5 ul.rm-oz > li > i, ul.rm-oz > li > i{
  flex:0 0 auto; width:1rem; font-size:1rem; line-height:1.4; color:var(--rm-orange); }

/* 51b · Zweite Darstellung desselben Shortcodes: Tag und Zeit nebeneinander,
   wie bisher auf den Filialseiten. Werte an der bisherigen Ausgabe gemessen
   (Mulish 18px/25.2px, Abstand 12px). */
.elementor-kit-5 .rm-oz-paare, .rm-oz-paare{ display:flex; flex-direction:column; gap:12px; }
.elementor-kit-5 .rm-oz-paar, .rm-oz-paar{
  display:flex; flex-direction:row; flex-wrap:wrap; gap:12px;
  font-family:"Mulish", sans-serif; font-weight:400; font-size:1.125rem;
  line-height:1.4; color:var(--rm-text); }

/* 52 · Kopfbalken auf schmalen Bildschirmen (Kunde, 25.09.: „der
   Händlerlogin ist an die Menüleiste geklebt").

   Der Balken hatte keinen Innenabstand, also endete der Knopf genau auf der
   Kante zur weißen Leiste. Dazu kam, dass die Zeile aus Lupe und Login
   umbrach, weil links der Anspruch „45 Filialen in fünf Bundesländern" den
   Platz belegte — Elementor gibt dem Block nur 46 % Breite, nebeneinander
   brauchen die beiden aber 179px.

   Bis 767px fällt der Anspruch deshalb weg. Er steht wortgleich im Kopfbild
   direkt darunter, geht also nicht verloren; dafür stehen Lupe und Login in
   einer Zeile, rechtsbündig, mit Luft nach allen Seiten. Zwischen 768 und
   1024px ist Platz für beides, dort bleibt der Anspruch stehen. */
@media (max-width:1024px){
  .rm-utility-links{ padding-block:10px; }
  .e-con:has(> .rm-utility-links){ padding-inline-end:2%; }
  .e-con:has(> .rm-utility-links) > *:first-child{ min-width:0; }
}
@media (max-width:767px){
  .e-con:has(> .rm-utility-links) > *:first-child{ display:none; }
  /* Ohne die Textspalte darf der Block seine eigene Breite nehmen, sonst
     bliebe er bei den 46 % und der Knopf liefe wieder hinaus. */
  .rm-utility-links{ --width:auto; width:auto; flex:0 0 auto; flex-wrap:nowrap;
    justify-content:center; }
  /* Mittig statt rechtsbuendig (Nutzer, 28.09.): links und rechts derselbe
     Rand. Dafuer muss auch der 2-%-Rand von oben wieder weg, sonst sitzt die
     Gruppe um diesen Betrag zu weit links. */
  .e-con:has(> .rm-utility-links){ justify-content:center; padding-inline-end:0; }
  .elementor-kit-5 .rm-utility-links .elementor-button,
  .rm-utility-links .elementor-button{ white-space:nowrap; }
}



/* 53 · Mega-Menü ohne Aktionsbox: volle Breite nutzen (Kunde, 29.09.).
   Das Raster des Panels reservierte immer eine Spalte von 240–280px für die
   Aktionsbox — auch bei Ratgeber, Unternehmen und Angebote, die keine haben.
   Rechts blieb dadurch eine leere Fläche stehen, und die Kacheln drängten sich
   links zusammen. Ohne Box gibt es jetzt nur noch eine Spalte. */
.rm-mega-inner:not(:has(.rm-mega-cta)){ grid-template-columns:minmax(0,1fr) !important; }

/* 54 · Sprachumschalter im Seitenkopf (06.10.2026).
   Das Aufklappfeld war 130px breit für eine 18px schmale Fahne. SmartMenus
   schreibt `min-width:10em` direkt in das Element, Elementors Stilblatt setzt
   zusätzlich `width:12em` — für beides gibt es im Menü-Widget keinen Regler.
   Hier wird das Feld nur so breit wie sein Inhalt. */
.rm-sprachwahl .elementor-nav-menu--main .elementor-nav-menu ul{
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
}

/* Elementor legt auf jeden Eintrag im Aufklappfeld einen 8px breiten, zunächst
   durchsichtigen linken Rand — darüber zeigt es sonst den aktiven Eintrag an.
   Hier schob er die untere Fahne um genau diese 8px nach rechts, sie stand
   also nicht unter der oberen. Bei zwei Fahnen braucht es die Anzeige nicht. */
.rm-sprachwahl .elementor-nav-menu--dropdown a{ border-left-width:0; }

/* Die Fahnen dürfen im schmalen Feld nicht gestaucht werden. */
.rm-sprachwahl img.trp-flag-image{ flex:0 0 auto; display:block; }/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Archivo';
	font-style: italic;
	font-weight: 500;
	font-display: auto;
	src: url('https://www.reifen-mueller.com/wp-content/uploads/fonts/archivo-italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Archivo';
	font-style: italic;
	font-weight: 700;
	font-display: auto;
	src: url('https://www.reifen-mueller.com/wp-content/uploads/fonts/archivo-italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Archivo';
	font-style: italic;
	font-weight: 900;
	font-display: auto;
	src: url('https://www.reifen-mueller.com/wp-content/uploads/fonts/archivo-italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://www.reifen-mueller.com/wp-content/uploads/fonts/archivo-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://www.reifen-mueller.com/wp-content/uploads/fonts/archivo-normal.woff2') format('woff2');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Mulish';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://www.reifen-mueller.com/wp-content/uploads/fonts/mulish-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Mulish';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://www.reifen-mueller.com/wp-content/uploads/fonts/mulish-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Mulish';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://www.reifen-mueller.com/wp-content/uploads/fonts/mulish-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Mulish';
	font-style: italic;
	font-weight: 400;
	font-display: auto;
	src: url('https://www.reifen-mueller.com/wp-content/uploads/fonts/mulish-italic.woff2') format('woff2');
}
/* End Custom Fonts CSS */