/* agora Website Relaunch v1: Bausteine für crm.html, hardware.html und erstgespraech.html.
   Ergänzt site.css. Werte kommen aus tokens.css, hier stehen keine eigenen Farben oder Schriften. */

/* ---------- Formular: Ergänzungen ---------- */
/* .formular setzt display: grid und hebt damit das hidden-Attribut auf. Ohne diese Zeile bleibt das Formular nach dem Absenden stehen. */
.formular[hidden] { display: none; }
.formular .knopf { justify-self: start; }
.auswahl { min-width: 0; }
.auswahl legend { padding: 0; margin-bottom: 0.5rem; }
.auswahl label:hover { box-shadow: inset 0 0 0 1.5px var(--tinte); }
.hinweiszeile { margin-top: 1.1rem; max-width: 34rem; font-size: var(--t-klein); color: var(--grau); }
.spalten .meldung { max-width: 34rem; }

/* ---------- Seitenkopf ohne Bild ---------- */
/* Unter 901px gilt der Abstand aus site.css, hier wird nur die Mindesthöhe aufgehoben. */
.abschnitt--nah { padding-top: clamp(2.5rem, 5vw, 4.5rem); }

/* ---------- Zwei Spalten ab Tablet-Breite ---------- */
.spalten { display: grid; gap: 3rem clamp(2rem, 6vw, 6rem); }
@media (min-width: 768px) { .spalten { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } }
.spalten__titel { font: 500 var(--t-mittel) / 1.2 var(--sans); letter-spacing: -0.01em; margin-bottom: 1.5rem; }

/* ---------- Kennwerte und Hinweis ---------- */
.titel + .plankopf, .vorspann + .plankopf { margin-top: 2rem; }
.hinweis { margin-top: 2rem; padding-top: 1.1rem; max-width: 52rem; border-top: 1.5px solid var(--tinte); }

/* ---------- Geräte ---------- */
.geraete { margin-top: 3rem; }
.geraet {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start;
  gap: 1.5rem clamp(1.5rem, 5vw, 4.5rem); padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  border-top: 1.5px solid var(--tinte);
}
.geraet:last-child { border-bottom: 1.5px solid var(--tinte); }
.geraet h3 { font: 500 var(--t-mittel) / 1.2 var(--sans); letter-spacing: -0.01em; }
.geraet p { margin-top: 0.6rem; max-width: 40ch; }
.geraet .plankopf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.geraet .plankopf dd { overflow-wrap: anywhere; }
@media (max-width: 760px) { .geraet { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .geraet .plankopf { grid-template-columns: 1fr; } }

/* ---------- Ablauf: nur für echte Reihenfolgen ---------- */
.ablauf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem clamp(1rem, 2.5vw, 2rem); margin-top: 2.75rem; counter-reset: schritt; }
.ablauf li { counter-increment: schritt; padding-top: 1rem; border-top: 1.5px solid var(--tinte); }
.ablauf li::before { content: counter(schritt); display: block; margin-bottom: 0.9rem; font: 500 var(--t-mittel) / 1 var(--mono); }
.ablauf h3 { font: 600 var(--t-text) / 1.3 var(--sans); }
.ablauf p { margin-top: 0.35rem; color: var(--grau); }
@media (max-width: 900px) { .ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ablauf { grid-template-columns: 1fr; } }

.ablauf--liste { grid-template-columns: 1fr; gap: 0; margin-top: 0; border-top: 1.5px solid var(--tinte); }
.ablauf--liste li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); padding-block: 0.9rem; border-top: 0; border-bottom: 1px solid var(--linie); }
.ablauf--liste li::before { margin: 0; line-height: 1.45; }
.ablauf--liste p { margin: 0; color: inherit; }

/* ---------- Ansprechpartner ---------- */
.ansprechpartner { margin-top: 2.5rem; }
.ansprechpartner img { width: min(100%, 16rem); aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; filter: grayscale(1) contrast(1.05); background: var(--nebel); }
.ansprechpartner figcaption { margin-top: 0.8rem; color: var(--grau); }
.ansprechpartner strong { font-weight: 600; color: var(--tinte); }

/* ---------- crm.html: Kette, sieben Schritte in fester Reihenfolge ---------- */
/* Die Linie läuft über alle Glieder durch, jedes Glied sitzt mit einer Marke darauf. Nur die letzte Marke ist orange. */
.kette { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2.25rem; margin-top: 2.75rem; counter-reset: glied; }
.kette li { position: relative; counter-increment: glied; padding: 1.1rem 0.9rem 0 0; border-top: 1.5px solid var(--tinte); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.kette li::before { content: counter(glied, decimal-leading-zero); display: block; margin-bottom: 0.8rem; font: 500 var(--t-mittel) / 1 var(--mono); }
.kette li::after { content: ""; position: absolute; left: 0; top: calc(-0.25rem - 0.75px); width: 0.5rem; height: 0.5rem; background: var(--tinte); }
.kette li:last-child::after { background: var(--orange); }
.kette h3 { font: 600 1rem / 1.3 var(--sans); }
.kette p { margin-top: 0.35rem; font-size: 0.95rem; line-height: 1.45; color: var(--grau); }
@media (max-width: 1279px) { .kette { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .kette { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  .kette { grid-template-columns: 1fr; row-gap: 0; border-top: 1.5px solid var(--tinte); }
  .kette li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); padding: 0.9rem 0; border-top: 0; border-bottom: 1px solid var(--linie); }
  .kette li::before { grid-row: 1 / span 2; margin: 0; font-size: var(--t-text); line-height: 1.3; }
  .kette li::after { display: none; }
  .kette h3, .kette p { grid-column: 2; }
}

/* ---------- crm.html: Ansichten ---------- */
/* Die Bildschirmfotos sind 1440px breit und brauchen mehr Platz als die Textspalte. Die breite Spalte wechselt mit dem Bild die Seite. */
@media (min-width: 1000px) {
  .zeilen--weit .zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
  .zeilen--weit .zeile:nth-child(even) { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
}
/* Zwei Ansichten ohne Bild, nebeneinander. */
.textpaar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem clamp(1.5rem, 5vw, 4.5rem); margin-top: clamp(3rem, 7vw, 6rem); }
.textpaar article { padding-top: 1.25rem; border-top: 1.5px solid var(--tinte); }
.textpaar h3 { font: 500 var(--t-mittel) / 1.2 var(--sans); letter-spacing: -0.01em; }
.textpaar .werkzeug__punkte { margin-top: 0.9rem; }
@media (max-width: 760px) { .textpaar { grid-template-columns: 1fr; } }

/* ---------- crm.html: Umfang, Liste mit Trennlinien ---------- */
.umfang { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2.5rem; border-top: 1.5px solid var(--tinte); }
.umfang > div { padding: 1.05rem clamp(1.25rem, 3vw, 2.5rem) 1.15rem 0; border-bottom: 1px solid var(--linie); }
.umfang dt { font-weight: 600; }
.umfang dd { margin-top: 0.2rem; color: var(--grau); }
@media (max-width: 1000px) { .umfang { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .umfang { grid-template-columns: 1fr; } .umfang > div { padding-right: 0; } }

/* ---------- crm.html: Nachweis ---------- */
.nachweis { margin-top: 2.25rem; }
.nachweis .plankopf dd { overflow-wrap: anywhere; }

/* Kette zeichnet sich (Prinzip SmoothUI "SVG Draw on Scroll"): die Linie läuft von Glied zu Glied,
   der Punkt erscheint, wenn sie ankommt. Nur im Raster mit Linie oben, nicht in der Handy-Liste. */
@media (min-width: 481px) and (prefers-reduced-motion: no-preference) {
  .kette--zeichnen li { border-top-color: transparent; background: linear-gradient(var(--tinte), var(--tinte)) left top / 0 1.5px no-repeat; background-origin: border-box; }
  .kette--zeichnen li::after { opacity: 0; scale: 0.9; }
  .kette--gezeichnet li { background-size: 100% 1.5px; transition: background-size 200ms linear calc(var(--glied) * 170ms); }
  .kette--gezeichnet li::after { opacity: 1; scale: 1; transition: opacity 200ms var(--weich) calc(var(--glied) * 170ms), scale 200ms var(--weich) calc(var(--glied) * 170ms); }
  .kette li:nth-child(1) { --glied: 0; } .kette li:nth-child(2) { --glied: 1; } .kette li:nth-child(3) { --glied: 2; }
  .kette li:nth-child(4) { --glied: 3; } .kette li:nth-child(5) { --glied: 4; } .kette li:nth-child(6) { --glied: 5; }
  .kette li:nth-child(7) { --glied: 6; }
}

/* Honigtopf: für Menschen unsichtbar, Skripte füllen ihn aus */
.feld--falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.meldung--fehler { border-left-color: var(--tinte); }
.meldung--fehler[hidden] { display: none; }
.formular .knopf:disabled:not(.absenden) { opacity: 0.6; cursor: progress; }