/* =========================================================================
   bipro-box.de — Ergänzungen zum gemeinsamen Stylesheet

   Alles Grundsätzliche (Farben, Schriften, Raster, Karten, Pakete, Stimmen,
   Fragen) kommt aus stil.css. Hier stehen nur die Bausteine, die es dort
   noch nicht gibt: Gegenüberstellung, Ersparnisrechner, Gesellschaftssuche,
   Terminleiste, Videovorschau.

   Die Farbtrennung gilt unverändert: Rot = Identität, Blau = Bedienung.
   ========================================================================= */

/* ---- Gegenüberstellung: derselbe Arbeitstag, zweimal ------------------- */

.gegenueber {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.5rem;
}

@media (min-width: 52rem) {
  .gegenueber { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

.gegenueber__seite {
  background: var(--karte);
  border: 1px solid var(--linie);
  padding: 1.6rem 1.5rem 1.8rem;
}

.gegenueber__seite--heute {
  background: transparent;
  border-style: dashed;
}

.gegenueber__seite > h3 {
  font-family: var(--grotesk);
  font-size: var(--gr-klein);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
  padding-bottom: .7rem;
  border-bottom: 1.5px solid var(--tinte);
}

.gegenueber__seite--heute > h3 { color: var(--tinte-leise); border-bottom-color: var(--linie); }

.gegenueber ol {
  list-style: none;
  counter-reset: takt;
  margin: 0;
  padding: 0;
}

.gegenueber li {
  position: relative;
  padding: .55rem 0 .55rem 4.4rem;
  font-size: var(--gr-klein);
  border-bottom: 1px solid var(--linie-zart);
}

.gegenueber li:last-child { border-bottom: 0; }

.gegenueber li > time {
  position: absolute;
  left: 0;
  top: .55rem;
  font-family: var(--grotesk);
  font-variant-numeric: tabular-nums;
  font-size: var(--gr-winzig);
  font-weight: 700;
  color: var(--tinte-leise);
}

.gegenueber__seite--box li > time { color: var(--blau-text); }

.gegenueber__summe {
  margin-top: 1.2rem;
  padding-top: .9rem;
  border-top: 1.5px solid var(--tinte);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: var(--gr-klein);
}

.gegenueber__summe b {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
}

.gegenueber__seite--box .gegenueber__summe b { color: var(--blau-text); }

/* ---- Ersparnisrechner -------------------------------------------------- */

.rechner {
  display: grid;
  gap: 2rem;
  align-items: start;
  margin-top: 2.5rem;
}

@media (min-width: 56rem) {
  .rechner { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

.rechner__regler { display: grid; gap: 1.6rem; }

.rechner__feld > label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: var(--gr-klein);
  font-weight: 600;
  margin-bottom: .5rem;
}

.rechner__feld output {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  color: var(--blau-text);
}

.rechner input[type="range"] {
  width: 100%;
  accent-color: var(--blau-flaeche);
  height: 1.5rem;
}

.rechner__hinweis {
  font-size: var(--gr-winzig);
  color: var(--tinte-leise);
  margin-top: .3rem;
}

.rechner__ergebnis {
  background: var(--karte);
  border: 1px solid var(--linie);
  padding: 1.6rem 1.5rem;
}

.rechner__zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--linie-zart);
  font-size: var(--gr-klein);
}

.rechner__zeile b { font-variant-numeric: tabular-nums; font-size: var(--gr-basis); }

.rechner__summe {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1.5px solid var(--tinte);
}

.rechner__summe b {
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 400;
  color: var(--blau-text);
  font-variant-numeric: tabular-nums;
}

.rechner__fussnote {
  font-size: var(--gr-winzig);
  color: var(--tinte-leise);
  margin-top: 1rem;
}

/* ---- Gesellschaftssuche ------------------------------------------------ */

.suche { max-width: 34rem; }

.suche__feld {
  display: flex;
  align-items: center;
  gap: .6rem;
  border: 1.5px solid var(--tinte);
  background: var(--karte);
  padding: .1rem .1rem .1rem .9rem;
}

.suche__feld:focus-within { outline: 3px solid var(--blau-flaeche); outline-offset: 2px; }

.suche__feld input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: .8rem 0;
  font: inherit;
  color: inherit;
  min-width: 0;
}

.suche__feld input:focus { outline: none; }

.suche__treffer {
  list-style: none;
  margin: .9rem 0 0;
  padding: 0;
  display: grid;
  gap: .4rem;
}

/* Bewusst kein display:grid/flex auf dem Listenpunkt — siehe die Regel in
   PROJEKT.md: In einem Flex-Container wird jedes Kindelement zu einem
   eigenen Element und inline-Auszeichnungen im Text brechen um. */
.suche__treffer li {
  padding: .5rem .7rem;
  background: var(--karte);
  border-left: 3px solid var(--blau-flaeche);
  font-size: var(--gr-klein);
}

.suche__treffer li > strong { display: block; margin-bottom: .3rem; }

.suche__weg {
  display: inline-block;
  font-size: var(--gr-winzig);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--blau-text);
  border: 1px solid var(--linie);
  padding: .1rem .4rem;
  margin: 0 .3rem .2rem 0;
  white-space: nowrap;
}

.suche__leer {
  margin-top: .9rem;
  font-size: var(--gr-klein);
  color: var(--tinte-leise);
}

/* ---- Mitlaufende Terminleiste ----------------------------------------- */

.terminleiste {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  background: var(--tinte);
  color: #fff;
  padding: .7rem 1rem;
  transform: translateY(110%);
  transition: transform .25s ease;
}

.terminleiste[data-sichtbar] { transform: none; }

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

.terminleiste__inhalt {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .6rem 1.2rem;
  font-size: var(--gr-klein);
}

.terminleiste__inhalt .knopf { padding: .5rem 1rem; font-size: var(--gr-klein); }

.terminleiste__schliessen {
  background: none;
  border: 1px solid rgba(255, 255, 255, .35);
  color: inherit;
  width: 2rem;
  height: 2rem;
  line-height: 1;
  cursor: pointer;
  flex: none;
}

.terminleiste__schliessen:hover { background: rgba(255, 255, 255, .12); }

/* Damit die Leiste den Fuß nicht verdeckt. */
body:has(.terminleiste[data-sichtbar]) .fuss { padding-bottom: 5.5rem; }

/* ---- Videovorschau, lädt erst nach Klick ------------------------------- */

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--tinte);
  border: 1px solid var(--linie);
  overflow: hidden;
}

.video img, .video iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}

.video__knopf {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: .6rem;
  justify-items: center;
  background: rgba(20, 22, 26, .45);
  border: 0;
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.video__knopf::before {
  content: "";
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--blau-flaeche) no-repeat center;
  background-image: linear-gradient(transparent, transparent);
  clip-path: circle(50%);
  display: grid;
  place-content: center;
}

.video__knopf > span { font-size: var(--gr-klein); max-width: 24ch; text-align: center; }

.video__hinweis { font-size: var(--gr-winzig); color: var(--tinte-leise); margin-top: .6rem; }

/* ---- Liste der Verwaltungsprogramme ----------------------------------- */
/* Die Karten der Maklerverwaltungsprogramme stehen jetzt in stil.css —
   beide Produktseiten zeigen dieselbe Liste. */


/* ---- Filterleiste über der Gesellschaftstabelle ------------------------ */

.tabellenfilter {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.tabellenfilter .suche { flex: 1 1 18rem; max-width: 26rem; }

.tabellenfilter__stand {
  font-size: var(--gr-klein);
  color: var(--tinte-leise);
  font-variant-numeric: tabular-nums;
}

.gesellschaften tr[hidden] { display: none; }

/* Der Strich für „nicht unterstützt" ist in stil.css auf --linie gesetzt und
   damit fast unsichtbar. Er trägt hier aber eine Aussage, nicht nur Schmuck. */
.gesellschaften .nein { color: var(--tinte-leise); }

/* =========================================================================
   Vorschaubild des Videos — eine Titelkarte statt eines dunklen Kastens
   Vorher war hier nur eine schwarze Fläche mit blauem Punkt. Es gibt kein
   Vorschaubild, das wir zeigen dürften, also setzen wir die Karte aus dem,
   was die Marke ohnehin hergibt: Schrift, Schrägstriche, Markenstriche.
   ========================================================================= */

.video--titelkarte {
  background:
    radial-gradient(120% 120% at 15% 0%, #1f2a35 0%, var(--tinte) 60%);
  border: 1.5px solid var(--tinte);
}
/* Die Markenstriche als Schmuck in der Ecke */
.video--titelkarte::before {
  content: "";
  position: absolute;
  background-image: repeating-linear-gradient(115deg, var(--rot) 0 3px, transparent 3px 14px);
  pointer-events: none;
}
.video--titelkarte::before { left: -10px; top: -10px; width: 120px; height: 120px; opacity: .85; }
/* Unten rechts zeichnet schon der umgebende Rahmen (.aufmacher__bild) die
   Striche — zweimal wäre zu viel. */

.video--titelkarte .video__knopf {
  background: transparent;
  gap: .9rem;
  padding: 1.5rem;
  cursor: pointer;
}
.video--titelkarte .video__knopf:hover { background: rgba(255, 255, 255, .04); }

.video--titelkarte .video__marke {
  font-family: var(--serif);
  font-size: clamp(2rem, 1.2rem + 3vw, 3.2rem);
  line-height: 1;
  color: var(--papier);
}
.video--titelkarte .video__marke .zeichen { color: var(--rot-hell); }
.video--titelkarte .video__titel {
  font-size: var(--gr-klein);
  color: rgba(246, 244, 239, .85);
  max-width: 28ch;
  text-align: center;
}
.video--titelkarte .video__dauer {
  font-size: var(--gr-winzig);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(246, 244, 239, .5);
}

/* Der Abspielknopf: weißer Kreis mit echtem Dreieck statt eines Punktes */
.video--titelkarte .video__knopf::before {
  width: 4.2rem;
  height: 4.2rem;
  /* Kreis mit Dreieck: beides in einem Element, damit das Zeichen auch
     wirklich in der Mitte sitzt — als eigenes Element saß es daneben. */
  background: var(--papier) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.2 2.6 L9.6 6 L4.2 9.4 Z' fill='%2314161A'/%3E%3C/svg%3E") center / 1.5rem no-repeat;
  clip-path: none;
  border-radius: 50%;
  transition: transform .18s, background-color .18s;
}
.video--titelkarte .video__knopf:hover::before { transform: scale(1.06); background: #fff; }
@media (prefers-reduced-motion: reduce) {
  .video--titelkarte .video__knopf:hover::before { transform: none; }
}

/* Zahlenband auf schmalen Handys: weniger Innenabstand, damit lange Wörter
   wie „vollautomatisch“ oder „Gesellschaften,“ nicht mitten im Wort brechen. */
@media (max-width: 30rem) {
  .zahl { padding: 2rem 1rem; }
}