/* ==========================================================================
   /assets/css/vr-layout.css – Unterseiten Verkehrsrecht & Arbeitsrecht
   Inhalt links, mitlaufende Sidebar rechts (Check, Inhalt, Autor).
   Wird von includes/verkehrsrecht/layout.php geladen (VR_LAYOUT_CSS).
   ========================================================================== */

.vr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; padding-top: 8px; padding-bottom: 64px; }
.vr-main { min-width: 0; }

/* Abschnitte der Seite liegen jetzt in der linken Spalte: kein eigener Rand mehr */
.vr-main > .section { padding: 8px 0 0; background: none; }
.vr-main .container { max-width: none; padding: 0; }
.vr-main .vr-article { max-width: 820px; }

/* Autor und FAQ in der linken Spalte */
.vr-autor-wrap { max-width: 820px; margin-top: 48px; }
.vr-faq { max-width: 820px; margin-top: 48px; }
.vr-faq h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); margin: 0 0 18px; }
.vr-faq .faq { max-width: none; margin: 0; }

/* Sidebar */
.vr-side { position: sticky; top: calc(var(--cl-header-h) + 20px); }
.vr-side-inner { display: flex; flex-direction: column; gap: 14px; }

.vr-side-cta { background: #fff; border: 1.5px solid var(--cl-orange); border-radius: var(--cl-radius-lg); padding: 20px; }
.vr-side-cta strong { display: block; font-size: 1.1rem; font-weight: 600; line-height: 1.3; margin-bottom: 8px; color: var(--cl-text); }
.vr-side-cta p { font-size: .9rem; line-height: 1.55; color: var(--cl-text-muted); margin: 0 0 14px; }
.vr-side-cta .btn { width: 100%; justify-content: center; }

.vr-side-box { display: block; background: #fff; border: 1px solid var(--cl-border); border-radius: var(--cl-radius); padding: 14px 16px; }
.vr-side-titel { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cl-text-muted); margin-bottom: 8px; }

.vr-side-toc ol { list-style: none; margin: 0; padding: 0; }
.vr-side-toc li a { display: block; padding: 5px 0 5px 12px; border-left: 2px solid var(--cl-border); font-size: .9rem; line-height: 1.35; color: var(--cl-text-muted); text-decoration: none; }
.vr-side-toc li a:hover { color: var(--cl-orange-dark); }
.vr-side-toc li a[aria-current] { color: var(--cl-text); font-weight: 600; border-left-color: var(--cl-orange); }

.vr-side-autor { display: flex; align-items: center; gap: 12px; color: var(--cl-text); text-decoration: none; transition: border-color .15s; }
.vr-side-autor:hover { border-color: var(--cl-orange); color: var(--cl-text); }
.vr-side-autor picture { flex: 0 0 44px; display: block; }
.vr-side-autor img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; }
.vr-side-autor span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.vr-side-autor strong { font-size: .95rem; }
.vr-side-autor small { font-size: .78rem; color: var(--cl-text-muted); }

/* Desktop: Inhaltsverzeichnis steht in der Sidebar, im Text wird es ausgeblendet */
@media (min-width: 1025px) {
  .vr-layout .vr-main .vr-toc { display: none; }
}
/* Niedrige Bildschirme: Sidebar kompakter, Autor ausblenden, damit alles sichtbar bleibt */
@media (min-width: 1025px) and (max-height: 820px) {
  .vr-side-autor { display: none; }
  .vr-side-cta { padding: 16px; }
  .vr-side-cta p { font-size: .86rem; margin-bottom: 12px; }
  .vr-side-toc li a { padding-top: 3px; padding-bottom: 3px; }
}
@media (min-width: 1025px) and (max-height: 680px) {
  .vr-side { position: static; }
}

/* Tablet und Handy: eine Spalte, Sidebar entfällt (mobil gibt es den festen Check-Button) */
@media (max-width: 1024px) {
  .vr-layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 24px; padding-bottom: 48px; }
  .vr-side { display: none; }
  .vr-main .vr-article, .vr-autor-wrap, .vr-faq { max-width: none; }
}
@media (max-width: 575px) {
  .vr-autor-wrap, .vr-faq { margin-top: 36px; }
}

/* Autorenzeile im Seitenkopf: Foto verlinkt aufs Profil */
.byline > a:first-child { flex: 0 0 44px; display: block; border-radius: 50%; }

/* Rechner: Auswahlfeld und Eingabefeld gleich hoch und im selben Stil (auch in Safari/iPhone) */
.rechner-row select, .rechner-row input { box-sizing: border-box; height: 50px; min-height: 50px; line-height: 1.2; padding: 0 14px; border: 1px solid #C9CCCC; border-radius: 10px; background-color: #fff; color: var(--cl-text); -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.rechner-row select { padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23C26E00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px; }
.rechner-row input[type="number"] { -moz-appearance: textfield; }
.rechner-row input[type="number"]::-webkit-outer-spin-button,
.rechner-row input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rechner-row input[type="date"] { min-height: 50px; display: flex; align-items: center; }

/* Rechner: Beschriftung oben, Feld immer unten – auch wenn eine Beschriftung zweizeilig ist */
.rechner-row { align-items: stretch; }
.rechner-row label { justify-content: space-between; }
.rechner-row label > select, .rechner-row label > input { margin-top: auto; }

/* Check-Buttons mit Upload-Icon (Bootstrap Icons „upload“, eingebettet – keine externe Quelle) */
.vr-hero-actions .btn--primary::before, .vr-cta .btn--primary::before, .vr-side-cta .btn::before,
.rechner-out .btn--primary::before, .cta-band .btn--primary::before, .sticky-cta::before {
  content: ""; display: inline-block; width: 1.15em; height: 1.15em; margin-right: .55em; vertical-align: -.2em; flex: 0 0 auto;
  background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5'/%3E%3Cpath d='M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5'/%3E%3Cpath d='M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.vr-side-cta .btn { padding-left: 14px; padding-right: 14px; white-space: nowrap; display: flex; align-items: center; justify-content: center; }