/* ==========================================================================
   LKW-Mautrechner  /lkw-mautrechner.html

   Mobile first: Basis = Telefon, danach min-width-Breakpoints.
   rem-Basis im Projekt ist 10px (html { font-size: 10px }).
   Alles unter #maut-rechner gescoped. Eigener .mt-shell statt Bootstrap
   .container, weil dessen feste Breite im Desktop-Template auf schmalen
   Viewports ueberlaeuft.

   Typografie: Inter fuer Fliesstext (Site-Standard), IBM Plex Sans fuer alles,
   was ein Wert aus einem Dokument oder aus der Tariftabelle ist - F.1, kg,
   ct/km, Betrag. Die Schriftwahl markiert also "amtliche Zahl".
   ========================================================================== */

#maut-rechner {
    --ink:        #16261d;
    --ink-2:      #46554b;
    --ink-3:      #6d7c72;
    --brand:      #2d5f41;
    --brand-dark: #1f4630;
    --brand-soft: #eaf2ec;
    --paper:      #f3f6f3;
    --line:       #dbe3dc;
    --line-soft:  #e9efea;
    --autobahn:   #1b4a9c;
    --bstrasse:   #f4c20d;
    --danger:     #a3301f;
    --danger-bg:  #fdf2ef;

    --doc: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;

    color: var(--ink);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

#maut-rechner *,
#maut-rechner *::before,
#maut-rechner *::after { box-sizing: border-box; }

#maut-rechner .mt-shell {
    width: 100%;
    max-width: 76rem;
    margin: 0 auto;
    padding: 0 1.6rem;
}

#maut-rechner .mt-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Kein border-radius hier: Auf einer nativen Checkbox oder einem Radio
   veranlasst das den Browser, die eingebaute Darstellung fallenzulassen -
   das Kaestchen verschwindet dann beim Fokussieren komplett. */
#maut-rechner :focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ------------------------------- Hero ------------------------------- */
#maut-rechner .mt-hero {
    padding: 2rem 0 2.4rem;
    background: linear-gradient(180deg, var(--paper) 0%, #fff 100%);
}

#maut-rechner .mt-crumb {
    display: flex;
    gap: .8rem;
    margin-bottom: 1.6rem;
    font-size: 1.3rem;
    color: var(--ink-3);
}
#maut-rechner .mt-crumb a { color: var(--ink-3); text-decoration: none; }
#maut-rechner .mt-crumb a:hover { color: var(--brand); text-decoration: underline; }

#maut-rechner .mt-eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .8rem;
    margin: 0 0 .8rem;
    font-family: var(--doc);
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--brand);
}
#maut-rechner .mt-eyebrow span { color: var(--line); }

#maut-rechner .mt-hero h1 {
    margin: 0 0 .8rem;
    font-size: 3.4rem;
    hyphens: none;
    overflow-wrap: normal;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--ink);
}

#maut-rechner .mt-deck {
    max-width: 34ch;
    margin: 0 0 2.4rem;
    font-size: 1.7rem;
    line-height: 1.4;
    color: var(--ink-2);
}

/* Signature: Zeile aus der Zulassungsbescheinigung Teil I */
#maut-rechner .mt-doc { margin: 0; }

#maut-rechner .mt-doc-sheet {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand);
    border-radius: .4rem;
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(45, 95, 65, .022) 0 6px,
            transparent 6px 12px
        ),
        #fff;
    box-shadow: 0 1px 2px rgba(22, 38, 29, .06);
    overflow: hidden;
}

#maut-rechner .mt-doc-code {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 1.4rem;
    border-right: 1px solid var(--line);
    background: var(--brand-soft);
    font-family: var(--doc);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--brand-dark);
}

#maut-rechner .mt-doc-field {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
    padding: 1rem 1.4rem;
}

#maut-rechner .mt-doc-name {
    font-family: var(--doc);
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-3);
}

#maut-rechner .mt-doc-value {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    font-family: var(--doc);
    font-size: 2.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--ink);
}

#maut-rechner .mt-doc-unit {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--ink-3);
}

#maut-rechner .mt-doc-cap {
    margin-top: 1.2rem;
    font-size: 1.4rem;
    line-height: 1.55;
    color: var(--ink-2);
}
#maut-rechner .mt-doc-cap strong { color: var(--ink); }

/* ------------------------------ Rechner ------------------------------ */
#maut-rechner .mt-calc { padding: 0 0 3.2rem; }

#maut-rechner .mt-card {
    padding: 2rem 1.6rem 2.2rem;
    margin: 0 -1.6rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--paper);
}

#maut-rechner .mt-card fieldset {
    min-width: 0;
    padding: 0;
    margin: 0 0 1.8rem;
    border: 0;
}

#maut-rechner .mt-label,
#maut-rechner .mt-field label {
    display: block;
    padding: 0;
    margin: 0 0 .6rem;
    border: 0;
    font-family: var(--doc);
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-3);
}

#maut-rechner .mt-field { margin-bottom: 1.6rem; }
#maut-rechner .mt-route .mt-field:last-child { margin-bottom: 1.8rem; }

#maut-rechner .mt-field input[type="text"],
#maut-rechner .mt-field input[type="number"],
#maut-rechner .mt-field select {
    display: block;
    width: 100%;
    height: 5rem;
    padding: 0 1.2rem;
    border: 1px solid var(--line);
    border-radius: .6rem;
    background: #fff;
    font-family: inherit;
    font-size: 1.6rem;
    color: var(--ink);
    appearance: none;
    -webkit-appearance: none;
}

#maut-rechner .mt-field select {
    padding-right: 3.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236d7c72' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.3rem center;
    background-size: 1.1rem;
}

#maut-rechner .mt-field input::placeholder { color: #9aa79f; }

#maut-rechner .mt-unit { position: relative; }
#maut-rechner .mt-unit input { padding-right: 4.4rem; }
#maut-rechner .mt-unit span {
    position: absolute;
    top: 50%; right: 1.2rem;
    transform: translateY(-50%);
    font-family: var(--doc);
    font-size: 1.4rem;
    color: var(--ink-3);
    pointer-events: none;
}

#maut-rechner .mt-note {
    display: block;
    margin-top: .5rem;
    font-size: 1.25rem;
    line-height: 1.45;
    color: var(--ink-3);
}

/* Honeypot: fuer Menschen unsichtbar, fuer Bots ein Koeder.
   Bewusst nicht display:none - manche Bots ueberspringen versteckte Felder. */
#maut-rechner .mt-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Segmentierte Auswahl */
#maut-rechner .mt-seg-row { display: flex; gap: .8rem; }
#maut-rechner .mt-seg-row label { flex: 1 1 0; margin: 0; cursor: pointer; }
#maut-rechner .mt-seg-row input {
    position: absolute; width: 1px; height: 1px; opacity: 0;
}
#maut-rechner .mt-seg-row span {
    display: block;
    padding: 1.2rem .8rem;
    border: 1px solid var(--line);
    border-radius: .6rem;
    background: #fff;
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
    color: var(--ink-2);
}
#maut-rechner .mt-seg-row input:checked + span {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}
#maut-rechner .mt-seg-row input:focus-visible + span {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Fahrzeugauswahl */
#maut-rechner .mt-vehicles { display: grid; gap: .8rem; }
#maut-rechner .mt-veh { margin: 0; cursor: pointer; }
#maut-rechner .mt-veh input {
    position: absolute; width: 1px; height: 1px; opacity: 0;
}
#maut-rechner .mt-veh-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 1.3rem 1.4rem;
    border: 1px solid var(--line);
    border-radius: .6rem;
    background: #fff;
}
#maut-rechner .mt-veh input:checked + .mt-veh-in {
    border-color: var(--brand);
    box-shadow: inset 0 0 0 1px var(--brand);
    background: var(--brand-soft);
}
#maut-rechner .mt-veh input:focus-visible + .mt-veh-in {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
#maut-rechner .mt-veh-name {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--ink);
}
#maut-rechner .mt-veh-f1 {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 0 0 auto;
    font-family: var(--doc);
    font-size: 1.3rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
    white-space: nowrap;
}
#maut-rechner .mt-tag {
    padding: .15rem .45rem;
    border-radius: .3rem;
    background: var(--brand-soft);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--brand-dark);
}

/* Checkboxen */
#maut-rechner .mt-checks { display: grid; gap: 1.2rem; margin-bottom: 1.8rem; }
#maut-rechner .mt-checks label {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--ink-2);
    cursor: pointer;
}
/* Eigene Darstellung statt der nativen: Sie sieht in jedem Browser gleich aus
   und kann nicht dadurch verschwinden, dass eine andere Regel die native
   Darstellung deaktiviert. */
#maut-rechner .mt-checks input[type="checkbox"] {
    flex: 0 0 auto;
    position: relative;
    width: 2rem; height: 2rem;
    margin: .1rem 0 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #b3c1b7;
    border-radius: .4rem;
    background: #fff;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}

#maut-rechner .mt-checks input[type="checkbox"]:hover {
    border-color: var(--brand);
}

#maut-rechner .mt-checks input[type="checkbox"]:checked {
    border-color: var(--brand);
    background: var(--brand);
}

/* Haken als CSS-Form, damit keine Schrift oder Grafik noetig ist. */
#maut-rechner .mt-checks input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: .25rem; left: .65rem;
    width: .5rem; height: 1rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
#maut-rechner .mt-checks small {
    display: block;
    margin-top: .2rem;
    font-size: 1.25rem;
    color: var(--ink-3);
}

/* Moduswechsel */
#maut-rechner .mt-switch {
    display: block;
    width: 100%;
    padding: 1rem 0;
    margin-bottom: 1.8rem;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--brand);
    text-align: left;
    text-decoration: underline;
    text-underline-offset: .3rem;
    cursor: pointer;
}
#maut-rechner .mt-switch:hover { color: var(--brand-dark); }

/* Hauptaktion */
#maut-rechner .mt-go {
    display: block;
    width: 100%;
    padding: 1.6rem 2rem;
    border: 0;
    border-radius: .6rem;
    background: var(--brand);
    font-family: inherit;
    font-size: 1.7rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: background .15s ease;
}
#maut-rechner .mt-go:hover:not(:disabled) { background: var(--brand-dark); }
#maut-rechner .mt-go:disabled { background: #a9b6ad; cursor: not-allowed; }

/* Meldung */
#maut-rechner .mt-alert {
    padding: 1.4rem 1.6rem;
    margin: 0 0 1.6rem;
    border-left: 3px solid var(--danger);
    border-radius: .4rem;
    background: var(--danger-bg);
    font-size: 1.45rem;
    line-height: 1.5;
    color: var(--danger);
}

/* ------------------------------ Ergebnis ------------------------------ */
#maut-rechner .mt-result { margin-top: 2rem; }

#maut-rechner .mt-res {
    padding: 2.2rem 1.8rem;
    border: 1px solid var(--line);
    border-top: 4px solid var(--brand);
    border-radius: .8rem;
    background: #fff;
    box-shadow: 0 2px 12px rgba(22, 38, 29, .06);
}

#maut-rechner .mt-res-lbl {
    margin: 0 0 .6rem;
    font-family: var(--doc);
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3);
}

#maut-rechner .mt-res-sum {
    font-family: var(--doc);
    font-size: 2.8rem;
    text-wrap: balance;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--ink);
}
#maut-rechner .mt-res-free .mt-res-sum { color: var(--brand); }

#maut-rechner .mt-res-hint {
    margin-top: .8rem;
    font-size: 1.35rem;
    line-height: 1.5;
    color: var(--ink-3);
}

#maut-rechner .mt-res-route {
    margin-top: 1.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--line-soft);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--ink-2);
}

#maut-rechner .mt-res-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem 1.6rem;
    margin: 1.6rem 0 0;
    padding: 1.6rem 0 0;
    border-top: 1px solid var(--line-soft);
}
#maut-rechner .mt-res-grid > div { min-width: 0; }
#maut-rechner .mt-res-grid dt {
    font-family: var(--doc);
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-3);
}
#maut-rechner .mt-res-grid dd {
    margin: .3rem 0 0;
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
}
#maut-rechner .mt-res-grid .mt-num {
    font-family: var(--doc);
    font-variant-numeric: tabular-nums;
}
#maut-rechner .mt-sub { font-weight: 400; color: var(--ink-3); }

#maut-rechner .mt-bd { margin-top: 1.6rem; }
#maut-rechner .mt-bd summary {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--brand);
    cursor: pointer;
}
#maut-rechner .mt-bd table {
    width: 100%;
    margin-top: 1rem;
    border-collapse: collapse;
    font-size: 1.4rem;
}
#maut-rechner .mt-bd th,
#maut-rechner .mt-bd td {
    padding: .7rem 0;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    font-weight: 500;
    color: var(--ink-2);
}
#maut-rechner .mt-bd td {
    font-family: var(--doc);
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--ink);
}

#maut-rechner .mt-block {
    margin-top: 1.6rem;
    padding: 1.4rem 1.6rem;
    border-radius: .6rem;
    background: var(--paper);
}
#maut-rechner .mt-block-warn {
    background: #fff9ea;
    border-left: 3px solid var(--bstrasse);
}
#maut-rechner .mt-block h4 {
    margin: 0 0 .7rem;
    font-family: var(--doc);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-3);
}
#maut-rechner .mt-block ul {
    margin: 0;
    padding-left: 1.8rem;
    font-size: 1.4rem;
    line-height: 1.55;
    color: var(--ink-2);
}
#maut-rechner .mt-block li + li { margin-top: .6rem; }

#maut-rechner .mt-res-stand {
    margin-top: 1.6rem;
    font-size: 1.2rem;
    color: var(--ink-3);
}

/* Ergebnis-CTA */
#maut-rechner .mt-cta {
    margin-top: 1.2rem;
    padding: 2rem 1.8rem;
    border-radius: .8rem;
    background: var(--ink);
    color: #fff;
}
#maut-rechner .mt-cta h3 {
    margin: 0 0 .6rem;
    font-size: 1.9rem;
    font-weight: 700;
    color: #fff;
}
#maut-rechner .mt-cta-txt {
    margin: 0 0 1.6rem;
    font-size: 1.45rem;
    line-height: 1.5;
    color: #b8c6bc;
}
#maut-rechner .mt-cta-btn {
    display: block;
    padding: 1.4rem 2rem;
    border-radius: .6rem;
    background: var(--brand);
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    text-decoration: none;
}
#maut-rechner .mt-cta-btn:hover,
#maut-rechner .mt-cta-btn:focus { background: #3a7a53; color: #fff; text-decoration: none; }
#maut-rechner .mt-cta-alt {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    margin: 1.4rem 0 0;
    font-size: 1.35rem;
}
#maut-rechner .mt-cta-alt a { color: #9fb3a6; text-decoration: underline; }
#maut-rechner .mt-cta-alt a:hover { color: #fff; }

/* ----------------------------- Grundlagen ----------------------------- */
#maut-rechner .mt-facts { padding: 3.2rem 0; }

#maut-rechner .mt-facts h2,
#maut-rechner .mt-faq h2,
#maut-rechner .mt-src h2,
#maut-rechner .mt-links h2 {
    margin: 3.2rem 0 1.4rem;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--ink);
}
#maut-rechner .mt-facts h2:first-child { margin-top: 0; }

#maut-rechner .mt-facts-cols { display: grid; gap: 0; }
#maut-rechner .mt-facts-cols > div > h2:first-child { margin-top: 3.2rem; }
#maut-rechner .mt-facts-cols > div:first-child > h2:first-child { margin-top: 0; }

/* Strassenschilder: kodieren die Rechtslage, nicht Dekoration */
#maut-rechner .mt-roads { margin: 0; padding: 0; list-style: none; }
#maut-rechner .mt-roads li {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--line-soft);
}
#maut-rechner .mt-roads li:first-child { border-top: 1px solid var(--line-soft); }

#maut-rechner .mt-shield {
    flex: 0 0 auto;
    margin-top: .1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem; height: 2.6rem;
    border-radius: .4rem;
    font-family: var(--doc);
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
}
#maut-rechner .mt-shield-a { background: var(--autobahn); }
#maut-rechner .mt-shield-b { background: var(--bstrasse); color: #1a1a1a; }
#maut-rechner .mt-shield-l { background: #fff; border: 1px solid var(--line); color: var(--ink-3); }

#maut-rechner .mt-road-txt {
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--ink-2);
}
#maut-rechner .mt-road-txt strong { display: block; color: var(--ink); }
#maut-rechner .mt-road-off .mt-road-txt { color: var(--ink-3); }
#maut-rechner .mt-road-off .mt-road-txt strong { color: var(--ink-2); }

#maut-rechner .mt-facts-note {
    margin: 1.2rem 0 0;
    font-size: 1.35rem;
    line-height: 1.55;
    color: var(--ink-3);
}

/* Schwelle */
#maut-rechner .mt-threshold { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
#maut-rechner .mt-th-item {
    padding: 1.4rem;
    border: 1px solid var(--line);
    border-radius: .6rem;
    text-align: center;
}
#maut-rechner .mt-th-free { background: var(--brand-soft); border-color: #cbe0d3; }
#maut-rechner .mt-th-due  { background: #fff9ea; border-color: #f0dda3; }
#maut-rechner .mt-th-val {
    display: block;
    font-family: var(--doc);
    font-size: 1.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}
#maut-rechner .mt-th-lbl {
    display: block;
    margin-top: .3rem;
    font-size: 1.3rem;
    color: var(--ink-2);
}

/* Warnung */
#maut-rechner .mt-warn {
    padding: 1.6rem 1.8rem;
    margin-top: 2rem;
    border-radius: .6rem;
    background: var(--danger-bg);
}
#maut-rechner .mt-warn h3 {
    margin: 0 0 .7rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--danger);
}
#maut-rechner .mt-warn p {
    margin: 0;
    font-size: 1.45rem;
    line-height: 1.6;
    color: var(--ink-2);
}

/* Tarifftabelle */
#maut-rechner .mt-tablewrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -1.6rem;
    padding: 0 1.6rem;
}
#maut-rechner .mt-table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
}
/* Die Schriftgroesse sitzt auf den inneren <b>, weil landingpage-modern.css
   td und th per !important auf eine feste Groesse zwingt und dafuer - anders
   als bei span - keine Ausnahme vorsieht. */
#maut-rechner .mt-table thead th {
    padding: .9rem 1rem .9rem 0;
    border-bottom: 2px solid var(--ink);
    text-align: right;
    white-space: nowrap;
}
#maut-rechner .mt-table thead th:first-child { text-align: left; }
#maut-rechner .mt-colh {
    font-family: var(--doc);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink);
}
#maut-rechner .mt-table tbody th {
    padding: 1.1rem 1rem 1.1rem 0;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
}
#maut-rechner .mt-wc {
    display: block;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
}
#maut-rechner .mt-table tbody td {
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--line-soft);
    text-align: right;
    white-space: nowrap;
}
#maut-rechner .mt-table tbody td + td { padding-left: 1.6rem; }
#maut-rechner .mt-val {
    font-family: var(--doc);
    font-size: 1.6rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
    color: var(--ink);
}
#maut-rechner .mt-ct {
    margin-left: .25rem;
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--ink-3);
}
#maut-rechner .mt-ex {
    display: block;
    margin-top: .2rem;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ink-3);
}

/* -------------------------- FAQ und Quellen -------------------------- */
#maut-rechner .mt-faq { padding: 3.2rem 0; background: var(--paper); }
#maut-rechner .mt-src { padding: 3.2rem 0; }

#maut-rechner .mt-q {
    border-bottom: 1px solid var(--line);
    background: transparent;
}
#maut-rechner .mt-faq .mt-q:first-of-type { border-top: 1px solid var(--line); }

#maut-rechner .mt-q > summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.4rem;
    padding: 1.5rem 0;
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}
#maut-rechner .mt-q > summary::-webkit-details-marker { display: none; }
#maut-rechner .mt-q > summary::after {
    content: "";
    flex: 0 0 auto;
    width: 1.1rem; height: 1.1rem;
    margin-top: .6rem;
    border-right: 2px solid var(--brand);
    border-bottom: 2px solid var(--brand);
    transform: rotate(45deg);
    transition: transform .18s ease;
}
#maut-rechner .mt-q[open] > summary::after { transform: rotate(-135deg); margin-top: 1rem; }

#maut-rechner .mt-a {
    padding: 0 0 1.8rem;
    font-size: 1.45rem;
    line-height: 1.65;
    color: var(--ink-2);
}
#maut-rechner .mt-srclist { margin: 0; padding-left: 1.8rem; }
#maut-rechner .mt-srclist li + li { margin-top: .7rem; }
#maut-rechner .mt-srclist a { color: var(--brand); }

#maut-rechner .mt-src-lead {
    margin: 0 0 1.8rem;
    font-size: 1.5rem;
    line-height: 1.6;
    color: var(--ink-2);
}
#maut-rechner .mt-disc {
    margin: 2rem 0 0;
    padding-top: 1.6rem;
    border-top: 1px solid var(--line-soft);
    font-size: 1.3rem;
    line-height: 1.6;
    color: var(--ink-3);
}

/* ---------------------------- Interne Links ---------------------------- */
#maut-rechner .mt-links { padding: 3.2rem 0 4rem; border-top: 1px solid var(--line); }
#maut-rechner .mt-linkrow { display: grid; gap: .8rem; }
#maut-rechner .mt-linkrow a {
    display: block;
    padding: 1.4rem 1.6rem;
    border: 1px solid var(--line);
    border-radius: .6rem;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}
#maut-rechner .mt-linkrow a:hover { border-color: var(--brand); background: var(--brand-soft); }
#maut-rechner .mt-linkrow strong {
    display: block;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--ink);
}
#maut-rechner .mt-linkrow span {
    display: block;
    margin-top: .2rem;
    font-size: 1.3rem;
    color: var(--ink-3);
}

/* ============================ ab 600 px ============================ */
@media (min-width: 600px) {
    #maut-rechner .mt-shell { padding: 0 2.4rem; }
    #maut-rechner .mt-hero { padding: 3.2rem 0 3.6rem; }
    #maut-rechner .mt-hero h1 { font-size: 4.4rem; }
    #maut-rechner .mt-deck { font-size: 1.9rem; max-width: 40ch; }

    #maut-rechner .mt-doc-value { font-size: 3.4rem; }
    #maut-rechner .mt-doc-cap { max-width: 52ch; font-size: 1.5rem; }

    #maut-rechner .mt-card {
        padding: 2.4rem;
        margin: 0;
        border: 1px solid var(--line);
        border-radius: .8rem;
    }
    #maut-rechner .mt-route { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
    #maut-rechner .mt-route .mt-field:last-child { margin-bottom: 1.6rem; }
    #maut-rechner .mt-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.6rem; }
    #maut-rechner .mt-vehicles { grid-template-columns: 1fr 1fr; }
    #maut-rechner .mt-field-sm { max-width: 36rem; }
    #maut-rechner .mt-seg-row { max-width: 32rem; }
    #maut-rechner .mt-go { width: auto; min-width: 24rem; }

    #maut-rechner .mt-res { padding: 2.8rem; }
    #maut-rechner .mt-res-sum { font-size: 4.8rem; }
    #maut-rechner .mt-res-grid { grid-template-columns: repeat(3, 1fr); }
    #maut-rechner .mt-cta { display: flex; align-items: center; gap: 2.4rem; padding: 2.4rem 2.8rem; }
    #maut-rechner .mt-cta-body { flex: 1 1 auto; }
    #maut-rechner .mt-cta-txt { margin-bottom: 0; }
    #maut-rechner .mt-cta-btn { flex: 0 0 auto; }
    #maut-rechner .mt-cta-alt { margin-top: 1rem; }

    #maut-rechner .mt-tablewrap { margin: 0; padding: 0; }
    #maut-rechner .mt-table tbody td + td { padding-left: 2.4rem; }
    #maut-rechner .mt-linkrow { grid-template-columns: 1fr 1fr; }
    #maut-rechner .mt-threshold { max-width: 44rem; }
}

/* ============================ ab 900 px ============================ */
@media (min-width: 900px) {
    #maut-rechner .mt-hero { padding: 4.4rem 0 4rem; }
    #maut-rechner .mt-hero h1 { font-size: 4.8rem; white-space: nowrap; }

    /* Hero zweispaltig: Text links, Dokumentzeile rechts */
    #maut-rechner .mt-hero .mt-shell {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        column-gap: 4rem;
        align-items: start;
    }
    #maut-rechner .mt-crumb,
    #maut-rechner .mt-eyebrow { grid-column: 1 / -1; }
    #maut-rechner .mt-deck { margin-bottom: 0; }
    #maut-rechner .mt-doc { grid-column: 2; grid-row: 3 / span 2; align-self: center; }

    #maut-rechner .mt-facts h2,
    #maut-rechner .mt-faq h2,
    #maut-rechner .mt-src h2,
    #maut-rechner .mt-links h2 { font-size: 2.6rem; }

    #maut-rechner .mt-facts { padding: 4.4rem 0; }
    #maut-rechner .mt-facts-cols {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 4.8rem;
    }
    #maut-rechner .mt-facts-cols > div > h2:first-child { margin-top: 0; }

    #maut-rechner .mt-faq .mt-shell,
    #maut-rechner .mt-src .mt-shell { max-width: 76rem; }
    #maut-rechner .mt-linkrow { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    #maut-rechner *, #maut-rechner *::after { transition: none !important; }
}