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

/* manrope-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  src: url('../../../../../lib/fonts/manrope/manrope-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* manrope-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  src: url('../../../../../lib/fonts/manrope/manrope-v20-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* manrope-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  src: url('../../../../../lib/fonts/manrope/manrope-v20-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
    --cl-logo: #a83232;
    --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: #a8323240;
    --cl-logodark: #a83232ff;
    --cl-bglight: #f*fffff;
    --cl-bgdark: #333333;
    --cl-border: #555555;
    --cl-borderlight: #555555;
    --cl-borderdark: #555555;

/* CNEB (cneb.de) - Design-Tokens. Werte um Faktor 1.6 skaliert (sitewide
   Root-Schriftgroesse ist 10px durch Bootstrap 3, nicht die ueblichen 16px -
   siehe /CLAUDE.md Abschnitt "Root-Schriftgroesse"). */
    --cneb-primary:        #2b2b2b;
    --cneb-primary-700:    #1a1a1a;
    --cneb-primary-soft:   #565656;
    --cneb-accent:         #a83232;
    --cneb-accent-600:     #8a2929;
    --cneb-accent-100:     #f7e9e9;
    --cneb-gray-brand:     #9a9a9a;
    --cneb-bg:             #f7f6f5;
    --cneb-surface:        #ffffff;
    --cneb-ink:            #262626;
    --cneb-ink-soft:       #63666a;
    --cneb-line:           #e2e0de;

    --cneb-font-head: "Manrope", system-ui, sans-serif;
    --cneb-font-body: "Inter", system-ui, -apple-system, sans-serif;

    --cneb-space-section: clamp(5.6rem, 7vw, 10.4rem);
    --cneb-container: 1220px;
    --cneb-container-narrow: 760px;
    --cneb-radius: 14px;
    --cneb-radius-sm: 9px;

    --cneb-shadow-sm: 0 1px 3px rgba(20, 20, 20, .08);
    --cneb-shadow-md: 0 10px 30px rgba(20, 20, 20, .10);
    --cneb-shadow-lg: 0 20px 50px rgba(20, 20, 20, .16);
    --cneb-header-h: 84px;
}

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(--cneb-header-h) + 12px); }

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

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

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

.cneb-header-call { flex-shrink: 0; }
.cneb-header-call-text { font-weight: 700; font-size: 1.536rem; }

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

@media (max-width: 900px) {
  .cneb-nav-toggle { display: flex; }
  .cneb-main-nav { position: fixed; top: var(--cneb-header-h); left: 0; right: 0; bottom: 0;
    background: var(--cneb-bg); transform: translateX(100%); transition: transform .25s; overflow-y: auto; }
  .cneb-main-nav.open { transform: translateX(0); }
  .cneb-main-nav ul { flex-direction: column; gap: 0; padding: 1.6rem 2.4rem; }
  .cneb-main-nav a { display: block; padding: 1.44rem 0; border-bottom: 1px solid var(--cneb-line); }
  .cneb-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: 0px !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: #a83232; }
a:hover { color: #333; }

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

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

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

.cneb-site-footer { background: var(--cneb-primary-700); color: #b9b9b9; font-family: var(--cneb-font-body); }
.cneb-footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 3.2rem; padding-block: clamp(4rem, 5vw, 5.6rem); }

/* Falls das Logo auf dem dunklen Footer-Hintergrund schlecht lesbar ist,
   braucht es ggf. eine helle/inverse Logo-Variante vom Kunden - hier bewusst
   nicht per CSS-Filter erzwungen, das wuerde den roten Akzent im Logo killen. */
.cneb-footer-brand img { height: 48px; width: auto; display: block; }
.cneb-footer-tag { color: #8f8f8f; max-width: 32ch; margin-top: 1.28rem; font-size: 1.472rem; line-height: 1.6; }

.cneb-footer-col h3 { color: #fff; font-size: 1.6rem; margin-bottom: 1.44rem; font-family: var(--cneb-font-head); }
.cneb-footer-col ul { display: grid; gap: .88rem; list-style: none; padding: 0; margin: 0; }
.cneb-footer-col a { color: #cdd0d2; text-decoration: none; font-size: 1.472rem; }
.cneb-footer-col a:hover { color: #e07d7d; }
.cneb-footer-col p { color: #b9b9b9; font-size: 1.472rem; line-height: 1.6; }
.cneb-footer-col p + p { margin-top: 1.12rem; }

.cneb-footer-bottom { border-top: 1px solid rgba(255,255,255,.08); }
.cneb-footer-bottom .cneb-container { padding-block: 1.76rem; }
.cneb-footer-bottom p { color: #7c7c7c; font-size: 1.28rem; margin: 0; }

@media (max-width: 900px) {
  .cneb-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .cneb-footer-grid { grid-template-columns: 1fr; }
}



/* -- CNEB LANDINGPAGE ------------------------------------------------------- */
/* 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).
   Unser Design ist randlos (full-bleed) angelegt, daher hier aufgehoben. */
#page { width: 100%; max-width: none; margin: 0; }

.cneb-eyebrow {
  font-family: var(--cneb-font-head); font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; font-size: 1.312rem; color: var(--cneb-accent); margin: 0 0 .96rem; display: block;
}

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

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

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

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

.cneb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .88rem;
  font-family: var(--cneb-font-head); font-weight: 700; font-size: 1.568rem;
  padding: 1.28rem 2.4rem; border-radius: 50px; line-height: 1.2;
  text-decoration: none; cursor: pointer; border: none;
  transition: transform .15s, background .2s, color .2s, box-shadow .2s;
}
.cneb-btn:hover { color: inherit; }
.cneb-btn:active { transform: translateY(1px); }
.cneb-btn-lg { padding: 1.6rem 3.2rem; font-size: 1.664rem; }

.cneb-btn-primary { background: var(--cneb-accent); color: #fff; box-shadow: 0 6px 18px rgba(168, 50, 50, .3); }
.cneb-btn-primary:hover { background: var(--cneb-accent-600); color: #fff; }

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

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

.cneb-btn-call { background: var(--cneb-primary); color: #fff; padding: .96rem 1.84rem; }
.cneb-btn-call:hover { background: var(--cneb-primary-700); color: #fff; }

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

/* Kontakt-Infobox (WYSIWYG-Feld se_text_50 im Generator-Element).
   Ohne ".wrapper"-Elternscope geschrieben: das CMS entfernt den umschliessenden
   Wrapper-Div beim Speichern des Textbausteins, die inneren Klassen bleiben
   aber erhalten (siehe /CLAUDE.md Abschnitt WYSIWYG-Textfelder). */
.cneb-contact-list { display: grid; gap: 1.92rem; margin-bottom: 2.88rem; list-style: none; padding: 0; font-family: var(--cneb-font-body); }
.cneb-contact-label { display: block; font-family: var(--cneb-font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 1.248rem; color: var(--cneb-accent); }
.cneb-contact-value { display: block; font-size: 1.84rem; font-weight: 700; color: var(--cneb-primary); margin-top: .24rem; text-decoration: none; }
a.cneb-contact-value:hover { color: var(--cneb-accent); }
.cneb-map-embed { border-radius: 14px; overflow: hidden; border: 1px solid var(--cneb-line); box-shadow: var(--cneb-shadow-sm); }
.cneb-map-embed iframe { width: 100%; height: 260px; border: 0; display: block; }
.cneb-map-link { display: block; text-align: center; padding: .96rem; font-size: 1.408rem; font-weight: 700; color: var(--cneb-primary); background: #fff; border-top: 1px solid var(--cneb-line); text-decoration: none; }
.cneb-map-link:hover { color: var(--cneb-accent); }

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

/* -- Impressum / Datenschutz (rechtliches/text_detail.tpl) ------------------ */
.se-rechtliches-no-se { font-family: var(--cneb-font-body); padding-block: clamp(4rem, 6vw, 7.2rem); }
.se-rechtliches-no-se h1 {
  font-family: var(--cneb-font-head); font-weight: 800; color: var(--cneb-primary) !important;
  font-size: clamp(3.2rem, 5vw, 4.48rem); margin-bottom: 2.4rem;
}
.se-rechtliches-no-se h2 { font-family: var(--cneb-font-head); font-weight: 700; color: var(--cneb-primary) !important; font-size: 2.24rem; margin: 3.2rem 0 .96rem; }
.se-rechtliches-no-se h3 { font-family: var(--cneb-font-head); font-weight: 700; color: var(--cneb-primary) !important; font-size: 1.76rem; margin: 2.24rem 0 .64rem; }
.se-rechtliches-no-se p, .se-rechtliches-no-se li { color: var(--cneb-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(--cneb-accent); text-decoration: underline; }

/* -- 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;
  }
}