/* /verkehrsleiter/: nur seiteneigene Teile. Grundlagen in site.css. */

/* Einstieg: längere Überschrift als auf der Fahrerseite, deshalb etwas kleiner und breiter */
.vl-einstieg h1 { font-size: clamp(2.25rem, 4.6vw, 3.875rem); max-width: 17ch; }
.vl-einstieg .lead { max-width: 36em; }
.vl-einstieg .vl-kurz { display: none; }
@media (max-width: 599px) {
  .vl-einstieg .vl-kurz { display: block; }
  .vl-einstieg .vl-voll { display: none; }
}

/* Ladungsschild im Einstieg: Werte sind Wörter, nicht nur Zahlen */
.vl-schild .schild-zeile { grid-template-columns: 8.5rem minmax(0, 1fr); }
.vl-schild dt { hyphens: manual; }
.vl-schild dd { font-size: clamp(1.375rem, 1.9vw, 1.625rem); line-height: 1.05; }

/* Eckdaten: vier Zeilen mit Haarlinien */
.vl-fakten-band { padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
.vl-fakten { display: grid; border-top: 2px solid var(--navy); }
.vl-fakten > div { padding: 1.1rem 0 1.25rem; border-bottom: 1px solid var(--linie); }
.vl-fakten dt { font: 800 clamp(1.5rem, 2.2vw, 1.875rem)/1.05 var(--schrift-plane); text-transform: uppercase; color: var(--navy); margin-bottom: .4rem; }
.vl-fakten dd { margin: 0; color: var(--text-2); max-width: 34ch; }
@media (min-width: 760px) { .vl-fakten { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
@media (min-width: 1100px) {
  .vl-fakten { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; }
  .vl-fakten > div { border-bottom: 0; padding: 1.25rem 1.5rem 0; }
  .vl-fakten > div:first-child { padding-left: 0; }
  .vl-fakten > div + div { border-left: 1px solid var(--linie); }
}

/* Drei Situationen: Überschrift braucht mehr Platz als in der Standardzeile */
@media (min-width: 760px) { .vl-zeilen .zeile { grid-template-columns: 19rem minmax(0, 1fr); } }

/* Zwei Spalten mit je eigener Überschrift */
.vl-paar h2 { font-size: clamp(1.875rem, 3vw, 2.625rem); }
.vl-paar .text { margin-bottom: 1.5rem; }

/* Liste mit Ösen als Aufzählungszeichen */
.vl-oesen { border-top: 2px solid var(--navy); }
.vl-oesen li { position: relative; padding: .8rem 0 .8rem 1.9rem; border-bottom: 1px solid var(--linie); color: var(--text-2); }
.vl-oesen li::before {
  content: ""; position: absolute; left: 0; top: 1.1rem; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, var(--plane) 0 30%, var(--alu-2) 34% 64%, var(--alu-kante) 68%);
}

/* Wer macht was */
.vl-wer { border-top: 2px solid var(--navy); }
.vl-wer > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1.5rem; padding: .85rem 0; border-bottom: 1px solid var(--linie); align-items: baseline; }
.vl-wer dt { color: var(--navy); }
.vl-wer dd { margin: 0; font: 700 1.0625rem/1.2 var(--schrift-plane); text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); text-align: right; }
@media (max-width: 599px) {
  .vl-wer > div { grid-template-columns: 1fr; }
  .vl-wer dd { text-align: left; }
}

/* Ablauf der Vermittlung */
.vl-ablauf { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--navy); }
.vl-ablauf li { display: grid; gap: .3rem 1.5rem; padding: 1.1rem 0 1.25rem; border-bottom: 1px solid var(--linie); }
.vl-wann { font: 800 1.375rem/1.15 var(--schrift-plane); text-transform: uppercase; color: var(--navy); }
.vl-wer-tag { font: 700 .9375rem/1.4 var(--schrift-plane); text-transform: uppercase; letter-spacing: .1em; color: var(--text-2); }
.vl-wer-tag.vl-wir { color: var(--navy); }
.vl-ablauf p { color: var(--text-2); max-width: 64ch; }
@media (min-width: 760px) {
  .vl-ablauf li { grid-template-columns: 14rem 4rem minmax(0, 1fr); align-items: baseline; }
}
.vl-vermerk { max-width: 52rem; }

/* Preis */
.vl-preis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.vl-preis > * { min-width: 0; }
@media (min-width: 980px) { .vl-preis { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 4rem; align-items: start; } }
.vl-preisschild { padding-bottom: 1.5rem; }
.vl-betrag { margin-top: 1.25rem; font: 800 clamp(3.5rem, 6vw, 4.75rem)/.95 var(--schrift-plane); color: var(--navy); font-variant-numeric: tabular-nums; }
.vl-betrag small { display: block; margin-top: .4rem; font: 700 1.125rem/1.2 var(--schrift-plane); text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); }
.vl-faellig { margin: 1rem 0 1.5rem; color: var(--text-2); }
.vl-tabelle { width: 100%; border-collapse: collapse; border-top: 2px solid var(--navy); }
.vl-tabelle th { padding: .8rem 0; text-align: left; font: 700 .9375rem/1.2 var(--schrift-plane); text-transform: uppercase; letter-spacing: .1em; color: var(--text-2); border-bottom: 1px solid var(--linie); }
.vl-tabelle td { padding: .9rem 0; border-bottom: 1px solid var(--linie); color: var(--navy); vertical-align: baseline; }
.vl-tabelle th:last-child, .vl-tabelle td:last-child { text-align: right; padding-left: 1.5rem; white-space: nowrap; }
.vl-tabelle td:last-child { font: 800 1.125rem/1.2 var(--schrift-plane); text-transform: uppercase; letter-spacing: .03em; }
.vl-unter-tabelle { margin-top: 1rem; }

/* Für Verkehrsleiter */
.vl-melden { margin-top: .5rem; }
.vl-melden .pfeil { width: 28px; height: 14px; margin-left: .75rem; transition: transform .2s var(--ease); }
.vl-melden a:hover .pfeil { transform: translateX(4px); }
.vl-erwartung h3 { margin-bottom: 1rem; color: var(--navy); }
@media (min-width: 980px) { .vl-erwartung { padding-top: .5rem; } }

/* Rechtlicher Hinweis */
.vl-recht { padding: 2.5rem 0; }
.vl-recht .hinweis { max-width: 80ch; line-height: 1.6; }

/* Handy-Leiste: längere Beschriftung soll in eine Zeile passen */
@media (max-width: 420px) {
  .leiste-handy .knopf span { padding: 0 .75rem; font-size: 1.0625rem; }
  main .knopf span { padding: 0 1rem; font-size: 1.125rem; }
  .vl-preisschild { padding-left: 1rem; padding-right: 1rem; }
}
@media (max-width: 374px) { main .knopf span { padding: 0 .75rem; font-size: 1.0625rem; } }