/* -- FONTS ----------------------------------------------------------------- */
/* barlow-condensed-300 - latin */
@font-face {
  font-display: swap;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 300;
  src: url('../../../../../lib/fonts/barlow-condensed/barlow-condensed-v13-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* barlow-condensed-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  src: url('../../../../../lib/fonts/barlow-condensed/barlow-condensed-v13-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* barlow-condensed-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  src: url('../../../../../lib/fonts/barlow-condensed/barlow-condensed-v13-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* barlow-condensed-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('../../../../../lib/fonts/barlow-condensed/barlow-condensed-v13-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* -- LAYOUT --------------------------------------------------------------- */

:root {
    --cl-logo: #ca1d24;
    --cl-text: #333333;

/* Maße */
    --w-page: 1400px;
    --page-top: 10px;
    --page-bottom: 10px;
    --w-cont: 1170px;


/* Überschriften */

    --cl-h1: #000000;
    --cl-h2: #333333;
    --cl-h3: #333333;
    --cl-h4: #333333;
    --cl-h5: #333333;
    --cl-h6: #333333;

    --fs-h1: 3.2rem;
    --fs-h2: 2.6rem;
    --fs-h3: 2.2rem;
    --fs-h4: 1.8rem;
    --fs-h5: 1.6rem;
    --fs-h6: 1.2rem;


    --cl-bg: #ffffff;
    --cl-body-bg: #dddddd;
    --cl-line: #555555;
    --cl-middle: #666666;
    --cl-light: #333333;

    --cl-link: var(--cl-logo);
    --cl-link-hover: var(--cl-text);

    --cl-navbg: var(--cl-bg);
    --cl-navlink: var(--cl-text);
    --cl-navlinkhover: var(--cl-bg);
    --cl-navlinkhoverbg: var(--cl-logo);

    --cl-highlight: #ff1c32;

    --footer-width: 1180px;
    --cl-footer-text: #ffffff;
    --cl-footer-bg: var(--cl-body-bg);

/* ersetzen */
    --cl-logolight: #ca1d2440;
    --cl-logodark: #ca1d24ff;
    --cl-bglight: #f*fffff;
    --cl-bgdark: #333333;
    --cl-border: #555555;
    --cl-borderlight: #555555;
    --cl-borderdark: #555555;

/* CM Autoglas Landingpage (cma-hp) - vormals cma-hp/_shared/tokens.css */
    --cma-primary:        #0f2a3b;
    --cma-primary-700:    #123a4e;
    --cma-primary-900:    #0a1e2b;
    --cma-accent:         #e8792e;
    --cma-accent-600:     #d76a1f;
    --cma-accent-100:     #fdeede;
    --cma-bg:             #f7f5f2;
    --cma-surface:        #ffffff;
    --cma-ink:            #1c2530;
    --cma-ink-soft:       #566573;
    --cma-line:           #e4e0da;
    --cma-star:           #f5b301;
    --cma-verified:       #2f8f5b;
    --cma-whatsapp:       #25d366;

    --cma-font-head: "Barlow Condensed", system-ui, sans-serif;
    --cma-font-body: "Inter", system-ui, -apple-system, sans-serif;

    --cma-space-section: clamp(5.2rem, 7vw, 9.6rem);
    --cma-container: 1600px;
    --cma-container-narrow: 820px;
    --cma-radius: 14px;
    --cma-radius-sm: 9px;

    --cma-shadow-sm: 0 1px 3px rgba(15, 42, 59, .08);
    --cma-shadow-md: 0 10px 30px rgba(15, 42, 59, .10);
    --cma-shadow-lg: 0 20px 50px rgba(15, 42, 59, .16);
    --cma-header-h: 104px;
}

html { position: relative; min-height: 100%; margin: 0; padding: 0; }

body {
  font-size: 1.6rem;
  color: var(--cl-text);
  height: 100%;
  min-height: 100%;
  background: transparent;
  
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cma-header-h) + 12px); }

.cma-site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247, 245, 242, .92);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s, border-color .25s, background .25s;
  font-family: var(--cma-font-body);
}
.cma-site-header.scrolled {
  background: rgba(255, 255, 255, .96);
  border-color: var(--cma-line);
  box-shadow: var(--cma-shadow-sm);
}
.cma-header-inner { display: flex; align-items: center; gap: 2.4rem; min-height: var(--cma-header-h); }

.cma-brand { display: flex; align-items: center; gap: 1.04rem; flex-shrink: 0; }
.cma-brand img { height: clamp(62px, 6vw, 80px); width: auto; display: block; }

.cma-main-nav { margin-left: auto; }
.cma-main-nav ul { display: flex; gap: 2.56rem; list-style: none; margin: 0; padding: 0; }
.cma-main-nav a {
  font-weight: 500; color: var(--cma-primary); position: relative; padding: 0.56rem 0;
  font-size: 1.568rem; text-decoration: none;
}
.cma-main-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--cma-accent); transition: width .22s;
}
.cma-main-nav a:hover::after, .cma-main-nav a.active::after { width: 100%; }

.cma-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.88rem;
  font-family: var(--cma-font-body); font-weight: 600; font-size: 1.6rem;
  border-radius: 50px; line-height: 1.2; text-decoration: none;
}
.cma-btn-call { flex-shrink: 0; background: var(--cma-primary); color: #fff; padding: 0.88rem 1.76rem; }
.cma-btn-call:hover { background: var(--cma-primary-700); }
.cma-header-call-text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.cma-header-call-label { font-size: 1.056rem; text-transform: uppercase; letter-spacing: .5px; opacity: .85; }
.cma-header-call-num { font-weight: 700; font-size: 1.632rem; }
.cma-ico { width: 20px; height: 20px; fill: currentColor; }

.cma-nav-toggle { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; }
.cma-nav-toggle span { display: block; height: 2.5px; width: 26px; margin-inline: auto; background: var(--cma-primary); border-radius: 2px; transition: transform .25s, opacity .2s; }
.cma-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.cma-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cma-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .cma-nav-toggle { display: flex; }
  .cma-main-nav { position: fixed; top: var(--cma-header-h); left: 0; right: 0; bottom: 0;
    background: var(--cma-surface); transform: translateX(100%); transition: transform .25s; overflow-y: auto; }
  .cma-main-nav.open { transform: translateX(0); }
  .cma-main-nav ul { flex-direction: column; gap: 0; padding: 1.6rem 2.4rem; }
  .cma-main-nav a { display: block; padding: 1.44rem 0; border-bottom: 1px solid var(--cma-line); }
  .cma-header-call-text { display: none; }
}


#page {
    background: rgba(255,255,255,0.9);
    height: 100%;
    width: var(--w-page);
    margin: 0 auto;
    margin-top: var(--page-top);
    margin-bottom: var(--page-bottom);
    padding: 0;
    display: table;
    table-layout: fixed;
    display: flex;
    min-height: calc(100vH - 20px);
    flex-direction: column;
}

#wrapper {
    flex: 1;
    height: 100%;
    background-color: transparent;
    padding-bottom: 20px !Important;
}

.container { width: var(--w-cont); }

.container div.se-cont.container { width: 100% !Important; }
.se-row { margin-right: -15px; margin-left: -15px; }


/* -- ÜBERSCHRIFTEN --------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: "Open Sans","Lucida Sans","Lucida Grande","Lucida Sans Unicode",Calibri,sans-serif;
  font-weight: 300;
  line-height: 1.2;
  margin: 0 0 0.25em;
}
h1 { color: var(--cl-h1); font-size: var(--fs-h1); }
h2 { color: var(--cl-h2); font-size: var(--fs-h2); }
h3 { color: var(--cl-h3); font-size: var(--fs-h3); }
h4 { color: var(--cl-h4); font-size: var(--fs-h4); }
h5 { color: var(--cl-h5); font-size: var(--fs-h5); }
h6 { color: var(--cl-h6); font-size: var(--fs-h6); }

.se-section h1, .se-section h2, .se-section h3, .se-section h4, .se-section h5 { margin-top: 0; }

a { color: #5e718b; }
a:hover { color: #333; }

/* -- SOCIAL ---------------------------------------------------------------- */
.social {}
.social li a i { color: #333 }
.social li a:hover i { color: #5e718b }

/* -- RECHTLICHES ----------------------------------------------------------- */
.rechtliches p { margin: 0; padding: 0; }
.rechtliches p a { margin: 0; padding: 0; }

/* -- FOOTER ---------------------------------------------------------------- */

.cma-site-footer { background: var(--cma-primary-900); color: #cdd8e0; margin-bottom: 0; font-family: var(--cma-font-body); }
.cma-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3.2rem; padding-block: clamp(4rem, 5vw, 6rem); }

.cma-brand-mark {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px;
  background: var(--cma-primary); color: #fff;
  font-family: var(--cma-font-head); font-weight: 700; font-size: 1.92rem; letter-spacing: 1px;
  margin-bottom: 1.44rem;
}
.cma-footer-tag { color: #9fb2c0; max-width: 22ch; }
.cma-footer-col h3 { color: #fff; font-size: 1.68rem; margin-bottom: 1.44rem; font-family: var(--cma-font-head); }
.cma-footer-col ul { display: grid; gap: 0.88rem; list-style: none; padding: 0; margin: 0; }
.cma-footer-col a { color: #cdd8e0; text-decoration: none; }
.cma-footer-col a:hover { color: var(--cma-accent); }
.cma-footer-col p { color: #b9c7d2; }
.cma-footer-col p + p { margin-top: 1.12rem; }

.cma-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); }
.cma-footer-bottom .cma-container { padding-block: 1.76rem; }
.cma-footer-bottom p { color: #8598a6; font-size: 1.408rem; margin: 0; }

.cma-mobile-bar { display: none; }
.cma-mobile-bar-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.8rem;
  padding: 1.52rem; font-weight: 700; color: #fff; font-size: 1.632rem; text-decoration: none;
}
.cma-mobile-bar-btn .cma-ico { width: 20px; height: 20px; fill: currentColor; }
.cma-mobile-bar-btn.cma-call { background: var(--cma-primary); }
.cma-mobile-bar-btn.cma-wa { background: var(--cma-accent); }

@media (max-width: 900px) {
  .cma-footer-grid { grid-template-columns: 1fr 1fr; }
  .cma-mobile-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; box-shadow: 0 -4px 16px rgba(0,0,0,.15); }
  body { padding-bottom: 64px; }
}
@media (max-width: 480px) {
  .cma-footer-grid { grid-template-columns: 1fr; }
}



/* -- CMA AUTOGLAS LANDINGPAGE (cma-hp) -------------------------------------- */
/* vormals cma-hp/_shared/styles.css. Nur klassenbasierte Regeln (keine
   body/h1-h6/a-Tag-Overrides), damit andere Seiten (Impressum, Datenschutz)
   unberuehrt bleiben. */

/* Basis-Template zwingt die Seite auf eine feste Breite (--w-page: 1400px,
   #page width). Unser Design ist randlos (full-bleed) angelegt, daher hier
   aufgehoben. */
#page { width: 100%; max-width: none; margin: 0; }

.cma-eyebrow {
  font-family: var(--cma-font-head); font-weight: 600; text-transform: uppercase;
  letter-spacing: 2px; font-size: 1.44rem; color: var(--cma-accent-600); margin: 0 0 .8rem;
}

.ueberschrift { color: var(--cma-primary) !important; }

.cma-section-intro { color: var(--cma-ink-soft); margin-top: 1.44rem; max-width: 60ch; }

.cma-stars { color: var(--cma-star); letter-spacing: 2px; }

/* eigene Container-Klasse statt "container" - Bootstrap 3 (sitewide geladen fuer
   die bestehenden Seitenelemente) definiert .container selbst mit fixer max-width
   (750/970/1170px), das kollidierte mit unserem full-bleed Design. */
.cma-container { width: 100%; max-width: var(--cma-container); margin-inline: auto; padding-inline: clamp(1.76rem, 4vw, 3.2rem); }
.cma-container-narrow { max-width: var(--cma-container-narrow); margin-inline: auto; }

.cma-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.cma-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .88rem;
  font-family: var(--cma-font-body); font-weight: 600; font-size: 1.6rem;
  padding: 1.152rem 2.16rem; border-radius: 50px; line-height: 1.2;
  text-decoration: none; cursor: pointer; border: none;
  transition: transform .15s, background .2s, color .2s, box-shadow .2s;
}
.cma-btn:hover { color: inherit; }
.cma-btn:active { transform: translateY(1px); }
.cma-btn-lg { padding: 1.52rem 2.88rem; font-size: 1.696rem; }
.cma-btn-block { width: 100%; }

.cma-btn-primary { background: var(--cma-accent); color: #fff; box-shadow: 0 6px 18px rgba(232, 121, 46, .35); }
.cma-btn-primary:hover { background: var(--cma-accent-600); color: #fff; }

.cma-btn-ghost { background: rgba(255, 255, 255, .12); color: #fff; border: 1.5px solid rgba(255, 255, 255, .55); }
.cma-btn-ghost:hover { background: rgba(255, 255, 255, .2); color: #fff; }

.cma-btn-outline { background: transparent; color: var(--cma-primary); border: 1.5px solid var(--cma-primary); }
.cma-btn-outline:hover { background: var(--cma-primary); color: #fff; }

.cma-btn-secondary { background: var(--cma-surface); color: var(--cma-primary); border: 1.5px solid var(--cma-line); }
.cma-btn-secondary:hover { border-color: var(--cma-primary); color: var(--cma-primary); }

.cma-btn-call { background: var(--cma-primary); color: #fff; padding: .88rem 1.76rem; }
.cma-btn-call:hover { background: var(--cma-primary-700); color: #fff; }

.cma-btn-whatsapp { background: var(--cma-accent); color: #fff; box-shadow: 0 6px 18px rgba(232, 121, 46, .3); }
.cma-btn-whatsapp:hover { background: var(--cma-accent-600); color: #fff; }

.cma-ico { width: 20px; height: 20px; fill: currentColor; }

/* Ohne ".cma-kontakt-side"-Elternscope geschrieben: das CMS/der WYSIWYG-Editor
   entfernt den umschliessenden <div class="cma-kontakt-side"> beim Speichern
   des Textbausteins, die inneren Klassen bleiben aber erhalten. */
.cma-contact-list { display: grid; gap: 1.92rem; margin-bottom: 2.88rem; list-style: none; padding: 0; font-family: "Inter", system-ui, -apple-system, sans-serif; }
.cma-contact-label { display: block; font-family: "Barlow Condensed", system-ui, sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 1.248rem; color: #d76a1f; }
.cma-contact-value { display: block; font-size: 1.84rem; font-weight: 600; color: #0f2a3b; margin-top: .24rem; text-decoration: none; font-family: "Inter", system-ui, -apple-system, sans-serif; }
a.cma-contact-value:hover { color: #e8792e; }
.cma-map-embed { border-radius: 14px; overflow: hidden; border: 1px solid #e4e0da; box-shadow: 0 1px 3px rgba(15,42,59,.08); }
.cma-map-embed iframe { width: 100%; height: 260px; border: 0; display: block; }
.cma-map-link { display: block; text-align: center; padding: .96rem; font-size: 1.408rem; font-weight: 600; color: #0f2a3b; background: #fff; border-top: 1px solid #e4e0da; text-decoration: none; font-family: "Inter", system-ui, -apple-system, sans-serif; }
.cma-map-link:hover { color: #e8792e; }

/* eigenstaendig (nicht mehr in .cma-kontakt-side verschachtelt), da Kooperationspartner-
   Kasten jetzt ein eigenes, spaltenuebergreifendes Feld (se_text_51) ist. */
.cma-koop-callout { font-family: "Inter", system-ui, -apple-system, sans-serif; background: #0f2a3b; color: #d7e2ea; border-radius: 14px; padding: 2.24rem 2.56rem; font-size: 1.536rem; line-height: 1.6; margin-top: 15px; }
.cma-koop-callout strong { color: #fff; }
.cma-koop-callout a { color: #e8792e; font-weight: 600; text-decoration: none; }

/* -- Impressum / Datenschutz (cms-layout/rechtliches/text_detail.tpl) ------- */
/* .se-rechtliches-no-se ist der feste Section-Wrapper aus text_detail.tpl,
   NICHT das WYSIWYG-Feld selbst - daher als Elternscope verwendbar. */
.se-rechtliches-no-se { font-family: var(--cma-font-body); padding-block: clamp(4rem, 6vw, 7.2rem); }
.se-rechtliches-no-se h1 {
  font-family: var(--cma-font-head); font-weight: 600; color: var(--cma-primary) !important;
  font-size: clamp(3.2rem, 5vw, 4.48rem); margin-bottom: 2.4rem;
}
.se-rechtliches-no-se h2 { font-family: var(--cma-font-head); font-weight: 600; color: var(--cma-primary) !important; font-size: 2.24rem; margin: 3.2rem 0 .96rem; }
.se-rechtliches-no-se h3 { font-family: var(--cma-font-head); font-weight: 600; color: var(--cma-primary) !important; font-size: 1.76rem; margin: 2.24rem 0 .64rem; }
.se-rechtliches-no-se p, .se-rechtliches-no-se li { color: var(--cma-ink); max-width: 70ch; }
.se-rechtliches-no-se p + p { margin-top: 1.28rem; }
.se-rechtliches-no-se ul { list-style: disc; padding-left: 2.24rem; display: grid; gap: .64rem; margin: .96rem 0; }
.se-rechtliches-no-se a { color: var(--cma-accent-600); text-decoration: underline; }

/* optionale Klassen, im WYSIWYG-Textfeld selbst nutzbar (z.B. Hinweisbox oben
   im Impressum, Platzhaltertext) - siehe Punkt 6 der rapidCMS-Checkliste im
   Brain-Vault: kein umschliessender Wrapper-Div, keine <style>-Tags. */
.cma-legal-note {
  background: var(--cma-accent-100); border: 1px solid #f4d3b3; border-radius: var(--cma-radius);
  padding: 1.6rem 1.92rem; margin-bottom: 3.2rem; font-size: 1.472rem; color: var(--cma-ink);
}
.cma-legal-note strong { color: var(--cma-accent-600); }
.cma-legal-placeholder { color: var(--cma-ink-soft); font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  .cma-btn { transition: none; }
}

/* -- MEDIA-QUERIES --------------------------------------------------------- */

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
    #page { width: 99%; margin: 0px auto; }
    .container { width: 100%; }
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {}

@media only screen and (min-width : 768px) {
  /* Make Navigation Toggle on Desktop Hover */
  .dropdown:hover .dropdown-menu {
      display: block;
  }
}