/**
 * KAWAI CA - Kopfzeile, Mega-Menue und Schriften.
 *
 * Wird von jeder Seite gebraucht, die den eigenen Header und die eigene
 * Fusszeile benutzt. Lag frueher im Feld "Eigenes CSS" der Serienseite.
 */

/* Akzidenz-Grotesk BQ ueber https nachdeklariert. Die Kadence-Option liefert http-Pfade,
   die der Browser als Mixed Content blockiert. Kann entfallen, sobald die Option korrigiert ist. */
@font-face{font-family:"Akzidenz-Grotesk BQ";font-weight:300;font-style:normal;font-display:swap;src:url("fonts/AkzidenzGroteskBQ-Light.woff2") format("woff2")}
@font-face{font-family:"Akzidenz-Grotesk BQ";font-weight:300;font-style:italic;font-display:swap;src:url("fonts/AkzidenzGroteskBQ-LightItalic.woff2") format("woff2")}
@font-face{font-family:"Akzidenz-Grotesk BQ";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/AkzidenzGroteskBQ-Regular.woff2") format("woff2")}
@font-face{font-family:"Akzidenz-Grotesk BQ";font-weight:400;font-style:italic;font-display:swap;src:url("fonts/AkzidenzGroteskBQ-Italic.woff2") format("woff2")}
@font-face{font-family:"Akzidenz-Grotesk BQ";font-weight:500;font-style:normal;font-display:swap;src:url("fonts/AkzidenzGroteskBQ-Medium.woff2") format("woff2")}
@font-face{font-family:"Akzidenz-Grotesk BQ";font-weight:500;font-style:italic;font-display:swap;src:url("fonts/AkzidenzGroteskBQ-MediumItalic.woff2") format("woff2")}
@font-face{font-family:"Akzidenz-Grotesk BQ";font-weight:700;font-style:normal;font-display:swap;src:url("fonts/AkzidenzGroteskBQ-Bold.woff2") format("woff2")}
@font-face{font-family:"Akzidenz-Grotesk BQ";font-weight:700;font-style:italic;font-display:swap;src:url("fonts/AkzidenzGroteskBQ-BoldItalic.woff2") format("woff2")}
@font-face{font-family:"Akzidenz-Grotesk BQ";font-weight:800;font-style:normal;font-display:swap;src:url("fonts/AkzidenzGroteskBQ-Super.woff2") format("woff2")}
@font-face{font-family:"Akzidenz-Grotesk BQ";font-weight:800;font-style:italic;font-display:swap;src:url("fonts/AkzidenzGroteskBQ-SuperItalic.woff2") format("woff2")}
@font-face{font-family:"Akzidenz-Grotesk BQ";font-weight:900;font-style:normal;font-display:swap;src:url("fonts/AkzidenzGroteskBQ-Super.woff2") format("woff2")}


/* Noto Serif Bold, selbst gehostet (OFL) - seit 1.20.67 im Plugin (assets/fonts), damit es auf jeder Domain laedt.
   Vorher absolute URLs auf das alte Staging kawai1583.live-website.com: auf kawai.eu blockiert (CORS/fehlend).
   weil siteurl in der Entwicklungsumgebung auf http steht. */
@font-face{
 font-family:"Noto Serif";font-style:normal;font-weight:700;font-display:swap;
 src:url("fonts/NotoSerif-Bold.woff2") format("woff2");
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* CA Series Header - rechte Seite (Figma 1:342) */
.wp-block-kadence-header-sectioncaseriesen-c-secr,
.wp-block-kadence-header-columncaseriesen-c-r{display:flex;align-items:center;gap:24px}
.wp-block-kadence-header-sectioncaseriesen-c-secr>*{margin-block:0}

.ca-hdr-dealers{margin:0}
.ca-hdr-dealers a,.ca-hdr-lang>summary,.ca-hdr-lang-list a{
 font-family:Roboto,Arial,Helvetica,sans-serif;font-size:16px;line-height:24px;
 color:#292929;text-decoration:none}
.ca-hdr-dealers a:hover,.ca-hdr-dealers a:focus-visible,
.ca-hdr-lang-list a:hover,.ca-hdr-lang-list a:focus-visible{color:#FE0C19}

/* Sprachumschalter: EN, klappt DE und FR auf */
/* Links etwas Luft, damit der Sprachwechsler nicht an DEALERS klebt.
   Zusammen mit dem Abstand der Leiste ergibt das denselben Wert wie zur
   Weltkugel auf der anderen Seite. */
.ca-hdr-lang{position:relative;margin:0 0 0 16px}
.ca-hdr-lang>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ca-hdr-lang>summary::-webkit-details-marker{display:none}
.ca-hdr-lang>summary::after{content:"";width:0;height:0;border-left:4px solid transparent;
 border-right:4px solid transparent;border-top:5px solid currentColor;transition:transform .15s ease}
.ca-hdr-lang[open]>summary::after{transform:rotate(180deg)}
.ca-hdr-lang>summary:focus-visible{outline:2px solid #FE0C19;outline-offset:3px;border-radius:3px}
.ca-hdr-lang-list{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);
 margin:0;padding:6px 0;list-style:none;min-width:66px;background:#fff;border-radius:8px;
 box-shadow:0 0 15px rgba(0,0,0,.12);z-index:20}
.ca-hdr-lang-list li{margin:0;text-align:center}
.ca-hdr-lang-list a{display:block;padding:6px 14px}
.ca-hdr-lang-list a:hover{background:#F7F7F7}

/* Globus zu kawai-global.com - 40px Abstand wie im Figma */
.ca-hdr-globe{display:inline-flex;align-items:center;margin-left:16px;line-height:0}
.ca-hdr-globe svg{display:block;width:25px;height:28px}
.ca-hdr-globe:focus-visible{outline:2px solid #FE0C19;outline-offset:4px;border-radius:4px}@media (prefers-reduced-motion:reduce){.ca-hdr-lang>summary::after{transition:none}
}


/* Der geschlossene Kopf soll dort beginnen, wo im aufgeklappten Zustand die
   weisse Karte beginnt - 16 unter der Seitenoberkante. Sonst springt die
   weisse Flaeche beim Aufklappen um genau diesen Betrag. */
header:has(.ca-mega-panel) .kb-header-container{
	margin-top:16px;
}

/* ================= Mega-Menue (Figma: geoeffneter Header) ================= */
.ca-mega-panel{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;z-index:100000;pointer-events:none}

/* Die Truebung als eigene Ebene ueber dem ganzen Fenster. Vorher trug sie die
   Huelle des Panels, und die ist auf 1328 Inhaltsbreite begrenzt - sichtbar
   als heller Streifen, sobald das Menue nicht ganz oben geoeffnet wurde. */
.ca-mega-panel::before{
 content:"";position:fixed;top:0;left:0;right:0;bottom:0;
 background:rgba(255,255,255,.92);
 -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
 opacity:0;visibility:hidden;pointer-events:none;
 transition:opacity .34s ease,visibility 0s linear .34s}
.ca-mega-panel.show-off-canvas::before{
 opacity:1;visibility:visible;
 transition:opacity .34s ease,visibility 0s}
@media (prefers-reduced-motion:reduce){
 .ca-mega-panel::before{transition:none}
}
.ca-mega-panel .kb-off-canvas-inner-wrap{
 position:fixed;left:0;right:0;top:0;width:auto;pointer-events:auto;
 height:auto;max-height:96vh;overflow-y:auto;background:transparent;box-shadow:none;padding:16px 24px 0;
 transform:translateY(-102%);visibility:hidden;
 transition:transform .34s cubic-bezier(.22,.61,.36,1),visibility 0s linear .34s}
.ca-mega-panel.show-off-canvas .kb-off-canvas-inner-wrap{transform:translateY(0);visibility:visible;
 transition:transform .34s cubic-bezier(.22,.61,.36,1),visibility 0s}@media (prefers-reduced-motion:reduce){.ca-mega-panel .kb-off-canvas-inner-wrap{transition:none}
}


.ca-mega-panel .kb-off-canvas-inner{
 position:relative;height:auto!important;min-height:0!important;max-height:none!important;
 display:block!important;background:#fff;border-radius:16px;padding:0 24px 25px;
 box-shadow:0 18px 40px rgba(0,0,0,.14)}

/* Schliessen-Kreuz links, auf Hoehe der Kopfzeile */
.ca-mega-panel .kb-off-canvas-close{
 position:absolute;top:22px;left:46px;z-index:3;width:28px;height:28px;
 background:none;border:0;color:#292929;cursor:pointer;padding:0}
.ca-mega-panel .kb-off-canvas-close svg{width:28px;height:28px}
.ca-mega-panel .kb-off-canvas-close:focus-visible{outline:2px solid #FE0C19;outline-offset:4px;border-radius:4px}

/* Kopfzeile im Panel */
.ca-mega-bar{position:relative;display:flex;align-items:center;justify-content:center;
 min-height:72px;padding:0}
.ca-mega-bar__logo{display:block;width:135px;height:auto}
.ca-mega-bar__right{position:absolute;right:0;top:50%;transform:translateY(-50%);
 display:flex;align-items:center;gap:24px}
.ca-mega-bar__right .ca-hdr-dealers-link,.ca-mega-bar__right .ca-hdr-lang>summary{
 font-family:Roboto,Arial,sans-serif;font-size:16px;line-height:24px;color:#292929;text-decoration:none}
.ca-mega-bar__right .ca-hdr-dealers-link:hover{color:#FE0C19}
.ca-mega-bar__right .ca-hdr-globe{margin-left:16px}

/* Kartenreihe */
.ca-mega.wp-block-columns{display:flex;flex-wrap:nowrap;gap:13px;align-items:stretch;margin:0}
.ca-mega.wp-block-columns>.wp-block-column.ca-mega-col{flex:0 0 calc((100% - 26px)*.2945);max-width:calc((100% - 26px)*.2945);min-width:0;background:#F2F2F2;border-radius:8px;padding:26px 28px}
.ca-mega.wp-block-columns>.wp-block-column.ca-mega-col--promo{flex:0 0 calc((100% - 26px)*.411);max-width:calc((100% - 26px)*.411);background:transparent;padding:0}
.ca-mega-title{font-family:Roboto,Arial,sans-serif;font-size:16px;line-height:22px;font-weight:700;
 letter-spacing:.01em;color:#292929;margin:0 0 20px}
.ca-mega-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ca-mega-list li{margin:0}
.ca-mega-list a,.ca-mega-todo{font-family:Roboto,Arial,sans-serif;font-size:16px;line-height:24px;
 color:#4B4B4B;text-decoration:none}
.ca-mega-list a:hover,.ca-mega-list a:focus-visible{color:#FE0C19}
.ca-mega-todo{color:#B9B9B9;cursor:default}
.ca-mega-todo::after{content:" (folgt)";font-size:12px}

/* Promo-Kachel */
.ca-mega-promo{display:block;height:100%;min-height:0;border-radius:8px;background:#111;overflow:hidden;padding:0}
/* contain statt cover: die Datei ist breiter als die Kachel, cover schnitt
   links und rechts je 78px ab - samt Logo. Die Raender des Bildes sind
   schwarz, der Fuellrand faellt auf dem schwarzen Grund nicht auf. */
.ca-mega-promo__bild{display:block;width:100%;height:100%;object-fit:contain;border-radius:8px}/*
 * Aufgeklapptes Menue auf schmalen Schirmen.
 *
 * Bis 1023 faellt das Werbebild weg - es bliebe nur ein Streifen uebrig - und
 * die beiden Linkspalten teilen sich die Breite. Bis 767 stehen sie
 * untereinander, sonst bricht der Text Buchstabe fuer Buchstabe um.
 *
 * Die Wahlausdruecke tragen dieselbe Struktur wie die Grundregel weiter oben.
 * Eine kuerzere Fassung verliert gegen sie - genau daran war die alte Regel
 * bei 900 wirkungslos.
 */
@media (max-width:1023px){
 .ca-mega.wp-block-columns>.wp-block-column.ca-mega-col--promo{display:none}

 .ca-mega.wp-block-columns{flex-wrap:wrap;gap:16px}
 .ca-mega.wp-block-columns>.wp-block-column.ca-mega-col{
  flex:1 1 calc(50% - 8px);max-width:calc(50% - 8px)}

 .ca-mega-bar{min-height:72px}

 .ca-mega-panel .kb-off-canvas-close{top:22px;left:24px}
}

@media (max-width:767px){
 .ca-mega.wp-block-columns{flex-direction:column;gap:12px}
 .ca-mega.wp-block-columns>.wp-block-column.ca-mega-col{
  flex:0 0 auto;max-width:none;width:100%}

 /* Die rechte Gruppe der Panelkopfzeile liegt absolut und schoebe sich sonst
    ueber das Logo. Auf dem Handy darum untereinander. */
 /* Luft ueber dem Logo - ohne min-height klebte es am oberen Rand. Der
    Schliessknopf sitzt links daneben auf gleicher Hoehe. */
 .ca-mega-panel .kb-off-canvas-inner{padding-top:26px}
 .ca-mega-bar{flex-direction:column;align-items:center;gap:10px;min-height:0}
 .ca-mega-bar__right{position:static;transform:none;justify-content:center}
 .ca-mega-bar__right .ca-hdr-lang{margin-left:0}
}


/* Geschlossene Kopfzeile ausblenden, solange das Panel offen ist (wie im Figma) */
body.kb-modal-open .wp-block-kadence-header3651-cpt-id>*:not(.ca-mega-panel){opacity:0;pointer-events:none}

/* Das Theme setzt fuer :visited, :focus und :active einen schwarzen Hintergrund
   (global.min.css laedt nach dieser Datei, gleiche Spezifitaet). Darum steht der
   Hintergrund hier fuer jeden Zustand ausdruecklich. */
.ca-btn--primary .wp-block-button__link,
.ca-btn--primary .wp-block-button__link:link,
.ca-btn--primary .wp-block-button__link:visited{
 background:#FE0C19;border:2px solid #FE0C19;box-shadow:none}
.ca-btn--primary .wp-block-button__link:hover,
.ca-btn--primary .wp-block-button__link:focus,
.ca-btn--primary .wp-block-button__link:focus-visible,
.ca-btn--primary .wp-block-button__link:active{background:#D2000C;border-color:#D2000C;box-shadow:none}

.ca-btn--secondary .wp-block-button__link,
.ca-btn--secondary .wp-block-button__link:link,
.ca-btn--secondary .wp-block-button__link:visited{
 background:#fff;border:2px solid #FE0C19;box-shadow:none}
.ca-btn--secondary .wp-block-button__link:hover,
.ca-btn--secondary .wp-block-button__link:focus,
.ca-btn--secondary .wp-block-button__link:focus-visible,
.ca-btn--secondary .wp-block-button__link:active{background:#FFEDED;border-color:#FE0C19;box-shadow:none}

/* Das Theme faerbt Knopftext beim Ueberfahren global weiss. Auf dem hellen
   Grund des umrandeten Knopfes war die Beschriftung damit nicht mehr zu
   lesen. Darum steht die Farbe hier in jedem Zustand ausdruecklich. */
.ca-btn--primary .wp-block-button__link,
.ca-btn--primary .wp-block-button__link:link,
.ca-btn--primary .wp-block-button__link:visited,
.ca-btn--primary .wp-block-button__link:hover,
.ca-btn--primary .wp-block-button__link:focus,
.ca-btn--primary .wp-block-button__link:focus-visible,
.ca-btn--primary .wp-block-button__link:active{color:#fff}

.ca-btn--secondary .wp-block-button__link,
.ca-btn--secondary .wp-block-button__link:link,
.ca-btn--secondary .wp-block-button__link:visited,
.ca-btn--secondary .wp-block-button__link:hover,
.ca-btn--secondary .wp-block-button__link:focus,
.ca-btn--secondary .wp-block-button__link:focus-visible,
.ca-btn--secondary .wp-block-button__link:active{color:#FE0C19}

/* Der aufgeklappte Header laesst die Seite bewusst weiterscrollen. Kadence gleicht aber trotzdem einen wegfallenden Rollbalken aus und macht den Body schmaler - dadurch rutscht die Seite beim Oeffnen zur Seite. Doppelte Klasse statt !important. */
body.kb-scrollbar-fixer.kb-scrollbar-fixer{margin-right:0;padding-right:0;width:auto}

/* Kadence sperrt bei offenem Menue das Scrollen (body.kb-modal-open{overflow:hidden}).
   Fuer ein Aufklappmenue ist das falsch: die Seite laesst sich nicht mehr bewegen und
   die Bildlaufleiste verschwindet, wodurch der Inhalt zusaetzlich springt. */
body.kb-modal-open.kb-modal-open{overflow:visible}

/* Ohne Begrenzung waechst das Panel mit dem Fenster und ragt ueber die
   Inhaltsbreite hinaus. Mit 1328 deckt sich die weisse Flaeche genau mit den
   Abschnitten der Seite. Doppelte Klasse noetig: Kadence setzt fuer diesen
   Off-Canvas-Block ein eigenes max-width:initial;width:100% als Inline-CSS,
   das sonst spaeter kommt und gewinnt. */
.ca-mega-panel.ca-mega-panel .kb-off-canvas-inner-wrap{
 max-width:1328px;width:auto;margin-inline:auto;background:transparent}
/*
 * Abschnitte, die bis unter den Header reichen. Der Header steht im Fluss vor
 * dem Inhalt, darum zieht die Regel den Abschnitt um genau seine Hoehe nach
 * oben. Wie hoch das ist, misst assets/kwca-kopf.js - es setzt sich aus dem
 * Abstand des Headers, seiner Hoehe und dem Platzhalter fuer den mitlaufenden
 * Header zusammen und steht erst nach dem Laden fest.
 */
.kwca-unter-kopf{
	margin-top:calc(-1 * var(--kwca-kopf,116px));
}

/*
 * Schwarzes Logo im Header. Das Logo ist eine rote Bilddatei - brightness(0)
 * faerbt sie schwarz und laesst die Transparenz stehen. Die Weltkugel daneben
 * ist ein SVG mit einem einzigen Pfad und fest eingetragenem fill; ein
 * Stylesheet sticht dieses Praesentationsattribut. So bleibt der gemeinsame
 * Header, der auf allen Seiten liegt, unangetastet.
 */
body:has(.kwca-dunkles-logo) header img.custom-logo,
body:has(.kwca-dunkles-logo) header img.ca-mega-bar__logo{
	filter:brightness(0);
}
body:has(.kwca-dunkles-logo) header .ca-hdr-globe svg path{
	fill:#000;
}

/*
 * Kadence blendet den Schliessknopf unter 1024px mit !important aus. Ohne ihn
 * laesst sich das aufgeklappte Menue auf Tablet und Handy nicht zuklappen -
 * deshalb hier gleichrangig zurueckgeholt.
 */
.ca-mega-panel .kb-off-canvas-close{
	display:flex !important;
}