/*
 * Ergänzungen für die statische Fassung.
 * Das eigentliche Design steckt unverändert in /assets/index-Bwij5-FY.css
 * (die Original-Stildatei der Seite). Hier steht nur, was ohne React fehlt.
 */

/* Tailwind-Klassen wie .flex würden [hidden] überstimmen */
[hidden] {
  display: none !important;
}

/* Karte im Kartenbereich füllt den Platz vollständig */
#cm-karte iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Ohne Bewegungswunsch keine Einblend-Animation */
@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Login-Knopf für den internen Vertriebsbereich (Kopfzeile) */
.cm-login{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255,255,255,.45);
  font-family: "Bebas Neue", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s;
}
.cm-login:hover,
.cm-login:focus-visible{ color: #29a148; }
.cm-login svg{ width: 1rem; height: 1rem; }

/* Zwischen Tablet und kleinem Laptop nur das Schloss, damit die
   Telefonnummer in der Kopfzeile nicht umbricht. */
@media (max-width: 1279px){
  .cm-login span{
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (max-width: 767px){
  .cm-login{ display: none; }   /* im Menü steht "Login Vertrieb" */
}

/* ═══════════ Geführter Assistent (grüne Schaltfläche unten rechts) ═══════════ */
.cm-assi{
  position: fixed;
  bottom: 6rem;
  right: 1rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: min(380px, calc(100vw - 2rem));
  max-height: min(620px, calc(100vh - 9rem));
  background: #111214;
  border: 1px solid rgba(41,161,72,.3);
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(41,161,72,.1);
  font-family: "Nunito Sans", sans-serif;
  color: #f2f3f2;
}
@media (min-width: 768px){ .cm-assi{ right: 1.5rem; } }

.cm-assi-kopf{
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .9rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.cm-assi-titel{ display: flex; align-items: center; gap: .6rem; }
.cm-assi-punkt{
  width: .55rem; height: .55rem; border-radius: 50%;
  background: #29a148; box-shadow: 0 0 0 3px rgba(41,161,72,.2); flex: none;
}
.cm-assi-titel b{
  display: block; font-family: "Bebas Neue", sans-serif; font-weight: 400;
  letter-spacing: .08em; font-size: 1rem; line-height: 1.15;
}
.cm-assi-titel span{ display: block; font-size: .72rem; color: rgba(255,255,255,.4); }
.cm-assi-zu{
  background: none; border: 0; color: rgba(255,255,255,.4);
  font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 .25rem;
}
.cm-assi-zu:hover{ color: #fff; }

.cm-assi-strom{
  flex: 1; overflow-y: auto; padding: 1rem;
  display: flex; flex-direction: column; gap: .55rem;
  scroll-behavior: smooth;
}
.cm-assi-blase{
  margin: 0; padding: .65rem .85rem; font-size: .89rem; line-height: 1.55;
  max-width: 88%; white-space: normal;
}
.cm-assi-blase.bot{
  background: #1a1d20; border: 1px solid rgba(255,255,255,.06);
  align-self: flex-start; color: rgba(242,243,242,.9);
}
.cm-assi-blase.ich{
  background: rgba(41,161,72,.15); border: 1px solid rgba(41,161,72,.35);
  align-self: flex-end; color: #d9f0df;
}
.cm-assi-verweis{
  align-self: flex-start; font-size: .82rem; color: #34c25b;
  text-decoration: none; padding: .1rem 0 .3rem;
}
.cm-assi-verweis:hover{ text-decoration: underline; }

.cm-assi-wahl{
  display: flex; flex-wrap: wrap; gap: .4rem;
  padding: .75rem 1rem; border-top: 1px solid rgba(255,255,255,.08);
}
.cm-assi-knopf{
  background: none; border: 1px solid rgba(255,255,255,.15);
  color: rgba(242,243,242,.85); font: inherit; font-size: .8rem;
  padding: .42rem .8rem; cursor: pointer; transition: border-color .15s, color .15s;
}
.cm-assi-knopf:hover{ border-color: #29a148; color: #fff; }
.cm-assi-knopf.betont{ border-color: rgba(41,161,72,.6); color: #6ede8a; }
.cm-assi-knopf.leise{ border-color: transparent; color: rgba(255,255,255,.35); }
.cm-assi-knopf.leise:hover{ color: rgba(255,255,255,.7); }

.cm-assi-fuss{
  padding: .55rem 1rem .7rem; font-size: .68rem; line-height: 1.4;
  color: rgba(255,255,255,.3); border-top: 1px solid rgba(255,255,255,.05);
}

.cm-assi-form{ display: flex; flex-direction: column; gap: .55rem; margin-top: .4rem; }
.cm-assi-feld{ display: flex; flex-direction: column; gap: .2rem; }
.cm-assi-feld span{
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.cm-assi-feld input, .cm-assi-feld select, .cm-assi-feld textarea{
  background: #1a1d20; border: 1px solid rgba(255,255,255,.12);
  color: #f2f3f2; font: inherit; font-size: .86rem; padding: .45rem .6rem;
  width: 100%; border-radius: 0;
}
.cm-assi-feld input:focus, .cm-assi-feld select:focus, .cm-assi-feld textarea:focus{
  border-color: #29a148; outline: none;
}
.cm-assi-haken{
  display: flex; gap: .5rem; align-items: flex-start;
  font-size: .74rem; line-height: 1.45; color: rgba(255,255,255,.5);
}
.cm-assi-haken input{ margin-top: .18rem; flex: none; }
.cm-assi-haken a{ color: #34c25b; }
.cm-assi-falle{ position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cm-assi-meldung{
  margin: 0; font-size: .8rem; color: #f0b090;
  border-left: 2px solid #e8825a; padding-left: .6rem;
}
.cm-assi-senden{
  background: #29a148; border: 0; color: #06210c; font: inherit; font-weight: 700;
  font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .65rem 1rem; cursor: pointer; margin-top: .2rem;
}
.cm-assi-senden:hover{ background: #34c25b; }
.cm-assi-senden:disabled{ opacity: .6; cursor: default; }

/* ═══════════ Neues Logo (Brügmann GmbH / Manufaktur) ═══════════
   Es ist breiter als das alte Platzhalter-Logo. Ohne diese Bremse
   stößt der Schriftzug im Bereich um 1024 px an die Navigation. */
header img[alt*="Logo"]{ height: 2.25rem; width: auto; }

/* Zwischen 1024 und 1279 px wurde die Telefonnummer schon vorher
   dreizeilig umgebrochen. Dort zeigen wir nur noch das Hörersymbol –
   die Nummer steht weiterhin im Menü und in der Fußzeile. */
@media (max-width: 1279px){
  header a[href^="tel:"] span{ display: none; }
  header img[alt*="Logo"]{ height: 1.6rem; }
}
@media (max-width: 767px){
  header img[alt*="Logo"]{ height: 1.75rem; }
}