/* CCM19-Banner als schmale Leiste am unteren Rand. Vorlage: carev/assets/banner.css (13.10.2026).
   Text, Knoepfe, Links und ihre Reihenfolge bleiben, wie CCM19 sie liefert, hier steht nur das Bild.
   !important ueberall, weil das Stylesheet von CCM19 nach diesem laedt.
   Eingebunden direkt nach fonts.css auf allen fuenf Seiten mit Banner, Version ?v= dort hochzaehlen.
   Pruefen: node tools/banner-messen.cjs <ordner> und node tools/messung-pruefen.cjs <ordner> */

/* Der Behaelter liegt durchsichtig ueber dem ganzen Fenster und faengt sonst jeden Klick auf die Seite ab */
#ccm-widget.ccm-modal{pointer-events:none!important}
#ccm-widget .ccm-modal-inner,#ccm-widget .ccm-modal-inner *{pointer-events:auto!important}

#ccm-widget .ccm-modal-inner{--bl:max(clamp(20px,4vw,56px),(100vw - 1220px)/2);
  display:block!important;top:auto!important;right:0!important;bottom:0!important;left:0!important;transform:none!important;
  width:100%!important;height:auto!important;max-width:none!important;max-height:none!important;
  background:#fff!important;border:0!important;border-top:1px solid rgba(22,32,42,.08)!important;border-radius:22px 22px 0 0!important;
  box-shadow:0 -14px 44px rgba(22,32,42,.12)!important;transition:none!important;
  font-family:'Kumbh Sans',system-ui,sans-serif!important;color:#16202a!important}
#ccm-widget .ccm-modal-inner>*{width:auto!important;max-width:none!important}

/* Kopf: nur der Schliessen-Knopf, er steht oben rechts in einer eigenen Spalte. Die Sprachwahl ist aus, die Seite ist deutsch */
#ccm-widget .ccm-modal--header{position:static!important;height:0!important;padding:0!important;background:none!important}
#ccm-widget .ccm-widget--language-switch{display:none!important}
#ccm-widget .ccm-dismiss-button{position:absolute!important;top:8px!important;right:calc(var(--bl) - 8px)!important;inset-inline-end:calc(var(--bl) - 8px)!important;
  display:grid!important;place-items:center!important;width:44px!important;height:44px!important;min-height:0!important;margin:0!important;padding:0!important;
  border:0!important;border-radius:50%!important;background:none!important;font-size:15px!important;line-height:1!important;color:#16202a!important;opacity:.62!important;cursor:pointer!important}
#ccm-widget .ccm-dismiss-button:hover{opacity:1!important;background:rgba(22,32,42,.06)!important}

/* Text links, Knoepfe rechts */
#ccm-widget .ccm-modal--body{display:flex!important;flex-flow:row nowrap!important;align-items:center!important;gap:14px 40px!important;
  padding:16px calc(var(--bl) + 48px) 2px var(--bl)!important;min-height:0!important;background:none!important;border:0!important;overflow:visible!important}
/* Gescrollt wird im aeusseren Kasten, der Text liegt als eigener Block darin. So zaehlt fuer die Ladezeitmessung
   (groesstes Element) nur der sichtbare Ausschnitt und nicht der ganze Text. Gemessen bei Carev 13.10.2026.
   Am Rechner 76 statt 118 px wie bei Carev: die Textspalte ist hier breiter als die Ueberschrift von /start/ (14.10.2026) */
#ccm-widget .ccm-widget--text{display:block!important;flex:1 1 auto!important;position:relative!important;min-width:0!important;min-height:0!important;max-height:76px!important;
  margin:0!important;padding:0 6px 0 0!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;scrollbar-width:thin!important}
#ccm-widget .ccm-widget--text::after{position:sticky!important;display:block!important;left:0!important;right:0!important;bottom:0!important;width:auto!important;height:16px!important;margin-top:-16px!important;background-image:linear-gradient(to top,#fff,rgba(255,255,255,0))!important;pointer-events:none!important}
/* Die Kastenhoehen enden mitten in einer Zeile: die angeschnittene Zeile zeigt, dass der Text weitergeht */
#ccm-widget .ccm-inner-overflow{width:auto!important;height:auto!important;max-height:none!important;margin:0!important;padding:0 0 12px!important;overflow:visible!important;
  font-size:13.5px!important;line-height:19px!important;font-weight:400!important;color:#445260!important}
#ccm-widget .ccm-widget--title{display:inline!important;margin:0 .3em 0 0!important;font-size:inherit!important;line-height:inherit!important;font-weight:600!important;color:#16202a!important}
#ccm-widget .ccm-widget--introduction,#ccm-widget .ccm-widget--introduction .ccm--p{display:inline!important;margin:0!important;font-size:inherit!important;line-height:inherit!important}

/* Beide Knoepfe gleich: Groesse, Farbe, Schrift. 44 px hoch. Neutral statt Orange, damit sie nicht mit "Jetzt anrufen" konkurrieren */
#ccm-widget .ccm-widget--buttons{flex:0 0 auto!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin:0!important;padding:0!important}
#ccm-widget .ccm-widget--buttons button,#ccm-widget .ccm-widget--buttons .button{display:flex!important;justify-content:center!important;align-items:center!important;
  width:100%!important;min-width:170px!important;max-width:none!important;min-height:44px!important;margin:0!important;padding:0 18px!important;
  border:0!important;border-radius:100px!important;background:#16202a!important;color:#fff!important;box-shadow:none!important;text-shadow:none!important;
  font-family:'Kumbh Sans',system-ui,sans-serif!important;font-size:15px!important;font-weight:600!important;line-height:1.15!important;letter-spacing:.01em!important;
  text-transform:none!important;white-space:nowrap!important;cursor:pointer!important;transition:background-color .2s!important}
#ccm-widget .ccm-widget--buttons button:hover,#ccm-widget .ccm-widget--buttons .button:hover{background:#2c3a48!important}
#ccm-widget .ccm-widget--buttons button:focus-visible,#ccm-widget .ccm-widget--buttons .button:focus-visible,
#ccm-widget .ccm-dismiss-button:focus-visible,#ccm-widget .ccm-modal--footer a:focus-visible{outline:2px solid #a43f0a!important;outline-offset:3px!important}

/* Fuss: Links und Herstellerzeile in einer Reihe */
#ccm-widget .ccm-modal--footer{display:flex!important;flex-flow:row wrap!important;justify-content:space-between!important;align-items:center!important;gap:0 24px!important;
  padding:0 var(--bl) calc(8px + env(safe-area-inset-bottom,0px))!important;background:none!important;border:0!important}
#ccm-widget .ccm-modal--footer>*{margin:0!important}
#ccm-widget .ccm-link-container{font-size:13px!important}
#ccm-widget .ccm-link-container a,#ccm-widget .ccm-link-container a.ccm-must-show{display:inline-flex!important;align-items:center!important;min-height:32px!important;
  font-size:13px!important;font-weight:500!important;color:#a43f0a!important}
#ccm-widget .ccm-link-container>a::before{top:10px!important;bottom:10px!important}
#ccm-widget .ccm-powered-by a{display:inline-flex!important;align-items:center!important;min-height:24px!important;font-size:12px!important;color:#5b6773!important}

/* Tablet und Handy: Text ueber den Knoepfen, der Text bleibt vollstaendig und laeuft in einem niedrigen Kasten */
@media (max-width:700px),(max-width:999px) and (min-height:501px){
  #ccm-widget .ccm-modal--body{flex-flow:column nowrap!important;align-items:stretch!important;gap:12px!important;padding:14px var(--bl) 2px!important}
  #ccm-widget .ccm-widget--text{padding-right:40px!important;max-height:72px!important}
  #ccm-widget .ccm-widget--buttons{align-self:end!important}
}
@media (max-width:700px){
  #ccm-widget .ccm-widget--text{max-height:68px!important}
  #ccm-widget .ccm-inner-overflow{font-size:13px!important;line-height:18px!important}
  #ccm-widget .ccm-widget--buttons{align-self:stretch!important}
  #ccm-widget .ccm-widget--buttons button,#ccm-widget .ccm-widget--buttons .button{min-width:0!important;padding:0 8px!important}
  #ccm-widget .ccm-dismiss-button{top:4px!important}
  #ccm-widget .ccm-modal--footer{justify-content:center!important}
  #ccm-widget .ccm-powered-by a{min-height:18px!important;font-size:11px!important}
}
/* Unter 360 px brach "Einstellungen" samt Trennstrich in eine eigene Zeile (Kumbh Sans laeuft breiter als
   Carevs Barlow), die Leiste wurde 213 statt rund 180 px hoch. Eine Spur kleiner passen alle drei in eine Zeile */
@media (max-width:360px){
  #ccm-widget .ccm-link-container,#ccm-widget .ccm-link-container a,#ccm-widget .ccm-link-container a.ccm-must-show{font-size:12px!important;letter-spacing:-.01em!important}
  /* bei 320: 60 + 20 + 110 + 20 + 74 = 284 px auf 280 px Platz, der Abstand von CCM19 wird 16 px */
  #ccm-widget .ccm-link-container>a:not(:first-child){margin-left:16px!important}
  #ccm-widget .ccm-link-container>a::before{left:-8px!important}
}
/* Wenig Hoehe (Handy quer, kleines Handy): der Kasten wird noch niedriger */
@media (max-height:500px){
  #ccm-widget .ccm-widget--text{max-height:68px!important}
}
@media (max-width:700px) and (max-height:600px){
  #ccm-widget .ccm-widget--text{max-height:50px!important}
}

/* Nach der Entscheidung bleibt unten links das Symbol von CCM19 stehen. Fokusring und kleine Ecke
   standen bisher nur in nav.css, Impressum und Datenschutz laden die nicht. Werte wie dort */
button[class*="ccm-settings-summoner"]:focus-visible{outline:2px solid #a43f0a!important;outline-offset:3px!important;border-radius:8px!important}
@media (max-width:940px){
  div[class*="ccm-settings-summoner"]{left:6px!important;inset-inline-start:6px!important;bottom:calc(6px + env(safe-area-inset-bottom,0px))!important;width:34px!important;height:34px!important}
  button[class*="ccm-settings-summoner"]{width:34px!important;height:34px!important;min-height:0!important}
}