/* =========================================================================
   pdf-box.de — nur was das gemeinsame stil.css noch nicht kennt.
   Alles andere (Farben, Schriften, Knöpfe, Karten, Pakete, Fuß) kommt
   unverändert von der Hauptseite. Wer hier etwas ergänzt, prüft vorher,
   ob es nicht in stil.css gehört — dann haben alle drei Domains es.
   ========================================================================= */


/* -------------------------------------------------------------------------
   Das Dokument, vorher und nachher.
   Der Kern des Produkts in einem Bild: links wie die Datei ankommt,
   rechts wie sie die Box verlässt.
   ------------------------------------------------------------------------- */

.dokument {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  margin-top: 3rem;
}

.dokument__seite {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1.5rem;
  min-width: 0;
}

.dokument__seite--nachher {
  border-color: var(--blau);
  box-shadow: 4px 4px 0 var(--blau-hauch);
}

.dokument__etikett {
  font-size: var(--gr-winzig);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin-bottom: .75rem;
}

.dokument__seite--nachher .dokument__etikett { color: var(--blau-text); }

.dokument__name {
  font-family: var(--grotesk);
  font-size: var(--gr-klein);
  word-break: break-word;
  background: var(--papier-tief);
  padding: .6rem .75rem;
  border-radius: var(--radius);
  display: block;
}

.dokument__seite--nachher .dokument__name {
  background: var(--blau-hauch);
  color: var(--blau-text);
  font-weight: 600;
}

.dokument__liste {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--gr-klein);
  color: var(--tinte-leise);
}

.dokument__liste li { padding: .3rem 0; }

.dokument__liste li::before {
  content: "–";
  color: var(--linie);
  margin-right: .5rem;
}

.dokument__seite--nachher .dokument__liste li::before {
  content: "✓";
  color: var(--blau-text);
  font-weight: 700;
}

.dokument__pfeil {
  font-size: 2rem;
  color: var(--rot);
  text-align: center;
}

@media (max-width: 48rem) {
  .dokument { grid-template-columns: 1fr; }
  .dokument__pfeil { transform: rotate(90deg); }
}


/* -------------------------------------------------------------------------
   Die Vergleichsmatrix der Maklerverwaltungsprogramme.
   Bisher standen hier vierzehn gestapelte Einzeltabellen. Der ganze Wert
   entsteht erst durch das Nebeneinander — also eine Tabelle, erste Spalte
   haftend, damit beim Querscrollen der Systemname stehen bleibt.
   ------------------------------------------------------------------------- */

.matrix__rahmen {
  overflow-x: auto;
  /* Ohne diese Begrenzung wächst der Rahmen mit der Tabelle mit, und auf
     schmalen Bildschirmen scrollt die ganze Seite statt nur der Tabelle. */
  max-width: 100%;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--karte);
}

.matrix {
  border-collapse: collapse;
  /* max-content statt 100 %: die Tabelle darf breiter werden als der Rahmen,
     der Rahmen fängt sie mit eigenem Scrollbalken ab. */
  width: max-content;
  min-width: 100%;
  font-size: var(--gr-klein);
}

.matrix th, .matrix td {
  border-bottom: 1px solid var(--linie-zart);
  padding: .55rem .7rem;
  text-align: left;
}

.matrix thead th {
  position: sticky;
  top: 0;
  background: var(--papier-tief);
  font-size: var(--gr-winzig);
  font-weight: 600;
  letter-spacing: .03em;
  vertical-align: bottom;
  z-index: 2;
}

/* Die Merkmalsspalten sind schmal und die Beschriftungen lang. Gedreht
   passen vierzehn Spalten auf einen Bildschirm, ohne dass abgekürzt
   werden muss — abgekürzte Fachbegriffe versteht sonst niemand. */
.matrix thead th.matrix__merkmal {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  height: 12rem;
  padding: .5rem .25rem;
  text-align: left;
}

.matrix thead th.matrix__gruppe {
  writing-mode: horizontal-tb;
  transform: none;
  height: auto;
  text-align: center;
  border-left: 1px solid var(--linie);
  color: var(--rot-text);
  text-transform: uppercase;
}

.matrix__system {
  position: sticky;
  left: 0;
  background: var(--karte);
  z-index: 1;
  min-width: 11rem;
}

.matrix tbody tr:hover .matrix__system,
.matrix tbody tr:hover { background: var(--blau-hauch); }

.matrix__name { font-weight: 600; display: block; }

.matrix__anbieter {
  display: block;
  font-size: var(--gr-winzig);
  color: var(--tinte-leise);
}

.matrix__wert { text-align: center; width: 1%; }

.matrix__ja     { color: var(--blau-text); font-weight: 700; }
.matrix__nein   { color: var(--linie); }
.matrix__arbeit { color: var(--rot-text); }
.matrix__unklar { color: var(--tinte-leise); }

.matrix__summe {
  text-align: center;
  font-family: var(--serif);
  font-size: var(--gr-gross);
  border-left: 1px solid var(--linie);
}

.matrix__summe--voll { color: var(--blau-text); }
.matrix__summe--wenig { color: var(--tinte-leise); }

/* Werkzeugleiste über der Tabelle */
.matrix__leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.25rem;
}

.matrix__suche {
  flex: 1 1 16rem;
  padding: .7rem .9rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--karte);
  font: inherit;
  font-size: var(--gr-klein);
}

.matrix__suche:focus-visible {
  outline: 2px solid var(--blau-flaeche);
  outline-offset: 1px;
}

.matrix__treffer {
  font-size: var(--gr-klein);
  color: var(--tinte-leise);
}

.matrix__legende {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: var(--gr-winzig);
  color: var(--tinte-leise);
  margin-top: 1rem;
}

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

/* Fußnoten einzelner Systeme */
.matrix__fussnote {
  font-size: var(--gr-winzig);
  color: var(--tinte-leise);
  display: block;
  margin-top: .2rem;
  max-width: 30ch;
}


/* -------------------------------------------------------------------------
   Schnellprüfung auf der Startseite: „Läuft mein MVP mit?"
   Dieselbe Datenlage, aber als Einzelabfrage statt als Tabelle.
   ------------------------------------------------------------------------- */

.mvpcheck {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  max-width: 42rem;
}

.mvpcheck__ergebnis { margin-top: 1.5rem; }

.mvpcheck__ergebnis:empty { display: none; }

.mvpcheck__karte {
  border-top: 2px solid var(--blau);
  padding-top: 1rem;
}

.mvpcheck__zahl {
  font-family: var(--serif);
  font-size: var(--gr-zahl);
  line-height: 1;
  color: var(--blau-text);
}

.mvpcheck__liste {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  font-size: var(--gr-klein);
  columns: 2;
  column-gap: 2rem;
}

@media (max-width: 40rem) { .mvpcheck__liste { columns: 1; } }

.mvpcheck__liste li { padding: .2rem 0; break-inside: avoid; }
.mvpcheck__liste li::before { margin-right: .5rem; font-weight: 700; }
.mvpcheck__liste li.ja::before     { content: "✓"; color: var(--blau-text); }
.mvpcheck__liste li.nein::before   { content: "×"; color: var(--linie); }
.mvpcheck__liste li.unklar::before { content: "?"; color: var(--tinte-leise); }

.mvpcheck__vorschlaege {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}

.mvpcheck__vorschlag {
  font: inherit;
  font-size: var(--gr-winzig);
  padding: .35rem .7rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  color: var(--tinte);
}

.mvpcheck__vorschlag:hover {
  border-color: var(--blau-flaeche);
  color: var(--blau-text);
}


/* -------------------------------------------------------------------------
   Der Ablauf: was mit einem Dokument geschieht.
   Vier Schritte statt elf Stichpunkten. Der vierte klappt auf, weil dort
   die Aktionen stehen — die Liste ist zu lang für die Übersicht und zu
   wichtig, um sie wegzulassen.
   ------------------------------------------------------------------------- */

.ablauf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
  counter-reset: ablauf;
}

.ablauf__schritt {
  border-top: 2px solid var(--linie);
  padding-top: 1rem;
  counter-increment: ablauf;
}

.ablauf__schritt::before {
  content: counter(ablauf, decimal-leading-zero);
  font-family: var(--serif);
  font-size: var(--gr-gross);
  color: var(--ziffer);
  display: block;
  margin-bottom: .5rem;
}

.ablauf__schritt h3 { margin: 0 0 .5rem; font-size: var(--gr-basis); }
.ablauf__schritt p { margin: 0; font-size: var(--gr-klein); color: var(--tinte-leise); }

.ablauf__schritt--offen { border-top-color: var(--blau); }

.ablauf__aktionen { margin-top: .75rem; font-size: var(--gr-klein); }
.ablauf__aktionen summary { cursor: pointer; color: var(--blau-text); }
.ablauf__aktionen ul { margin: .75rem 0 0; padding-left: 1.1rem; color: var(--tinte-leise); }
.ablauf__aktionen li { padding: .15rem 0; }


/* -------------------------------------------------------------------------
   Gegenüberstellung eines Arbeitsvormittags.
   ------------------------------------------------------------------------- */

.vormittag {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

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

.vormittag__spalte--box { border-color: var(--blau); }

.vormittag__kopf {
  font-size: var(--gr-winzig);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin: 0 0 1rem;
}

.vormittag__spalte--box .vormittag__kopf { color: var(--blau-text); }

.vormittag__zeile {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: .75rem;
  padding: .5rem 0;
  border-top: 1px solid var(--linie-zart);
  font-size: var(--gr-klein);
}

.vormittag__uhr {
  font-family: var(--serif);
  /* --ziffer ist für große Ordnungszahlen gedacht und erreicht bei dieser
     Schriftgröße nur 4,19:1. Hier steht eine echte Uhrzeit, also normaler
     Text — deshalb --tinte-leise mit 5,8:1. */
  color: var(--tinte-leise);
}


/* -------------------------------------------------------------------------
   Videos mit Vorschaltbild.
   Erst der Klick lädt das Video — vorher geht keine Anfrage an YouTube.
   Das ist nicht nur höflich, es spart auch den Ladeaufwand von zwei
   eingebetteten Abspielern auf der Startseite.
   ------------------------------------------------------------------------- */

.video { margin: 0; }

.video__start {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--karte);
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}

.video__start:hover { border-color: var(--blau-flaeche); }

.video__start:focus-visible {
  outline: 2px solid var(--blau-flaeche);
  outline-offset: 2px;
}

.video__start img { display: block; width: 100%; height: auto; }

.video__knopf {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--blau-flaeche);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  padding-left: .2rem;
}

.video__start:hover .video__knopf { background: var(--blau-tief); }

.video__text {
  display: block;
  padding: .9rem 1.1rem;
  font-size: var(--gr-klein);
  font-weight: 600;
  border-top: 1px solid var(--linie);
}

.video figcaption {
  margin-top: .75rem;
  font-size: var(--gr-klein);
  color: var(--tinte-leise);
}

.video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}


/* -------------------------------------------------------------------------
   Kleinigkeiten
   ------------------------------------------------------------------------- */

/* Werteliste: was die Box außer dem Titel noch aus dem Dokument holt */
.werte {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
}

.werte li {
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: .4rem .9rem;
  font-size: var(--gr-klein);
  background: var(--karte);
}

/* Hinweis auf die Schwesterdomain. Kommt auf mehreren Seiten vor. */
.schwester {
  border-left: 3px solid var(--rot);
  padding: 1rem 0 1rem 1.25rem;
  margin: 2rem 0;
  max-width: 46rem;
}

.schwester p { margin: 0; }
.schwester p + p { margin-top: .5rem; font-size: var(--gr-klein); color: var(--tinte-leise); }


/* =========================================================================
   Angebundene Maklerverwaltungsprogramme — nur Logos
   Die frühere Merkmalsmatrix mit 13 Spalten war auf dem Bildschirm kaum zu
   lesen und auf dem Handy gar nicht. Hier zählt die eine Frage: Ist mein
   System dabei? Das beantwortet ein Logo schneller als eine Tabelle.
   ========================================================================= */

.mvpgitter {
  list-style: none;
  padding: 0;
  margin-top: 2.5rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.mvpkachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .45rem;
  padding: 1.6rem 1.2rem 1.4rem;
  border: 1px solid var(--linie);
  background: var(--karte);
}
.mvpkachel__marke {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  margin-bottom: .3rem;
}
.mvpkachel__marke img { max-height: 56px; width: auto; max-width: 100%; }
/* Für Anbieter ohne Logodatei: der Name in der Schrift der Marke */
.mvpkachel__wort {
  font-family: var(--serif);
  font-size: var(--gr-h3);
  line-height: 1;
}
.mvpkachel__name { font-weight: 600; }
.mvpkachel__anbieter { font-size: var(--gr-klein); color: var(--tinte-leise); }
.mvpkachel__hinweis {
  margin-top: .35rem;
  font-size: var(--gr-winzig);
  line-height: 1.35;
  color: var(--blau-text);
  border-top: 1px solid var(--linie-zart);
  padding-top: .5rem;
}

/* =========================================================================
   Webinarband auf den Unterseiten
   ========================================================================= */

.webinarband__gitter { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 62rem) {
  .webinarband__gitter { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: 3.5rem; }
}
.webinarband h2 { font-size: var(--gr-h2); line-height: 1.05; }
.webinarband h2 em { font-style: italic; color: var(--blau-text); }
.webinarband__lead { font-size: var(--gr-gross); color: var(--tinte-leise); margin-top: 1rem; max-width: 46ch; }
.webinarband__vorteil {
  margin-top: 1.1rem;
  padding-left: 1.6rem;
  position: relative;
  max-width: 46ch;
}
.webinarband__vorteil::before {
  content: "";
  position: absolute;
  left: 0; top: .2em;
  width: 1.05em; height: 1.05em;
  background-color: var(--rot-text);
  -webkit-mask: var(--haken) center / contain no-repeat;
          mask: var(--haken) center / contain no-repeat;
}

/* Hinweis auf das Webinar unter der Systemübersicht */
.mvp__webinar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.8rem;
}
.mvp__webinar span { font-size: var(--gr-klein); color: var(--tinte-leise); max-width: 42ch; }