/* ===========================================================================
   Ladekosten - Oberflaeche
   Farbwelt und Typografie wie das MSP-Portal: Montserrat, Limettengruen als
   Akzent auf fast schwarzem Anthrazit. Alle Schriften liegen lokal, damit die
   strikte CSP (default-src 'self') greift und keine externen Requests
   entstehen.
   =========================================================================== */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Montserrat-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/Montserrat-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/Montserrat-SemiBold.woff2') format('woff2');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/Montserrat-Bold.woff2') format('woff2');
}

/* --- Palette (identisch zum MSP-Portal) ---------------------------------- */
:root {
    --lk-primary-50:  #f4fbe8;
    --lk-primary-100: #e5f5c5;
    --lk-primary-200: #ccec92;
    --lk-primary-300: #b0df5c;
    --lk-primary-400: #96d335;
    --lk-primary-500: #86c724;
    --lk-primary-600: #82b336;
    --lk-primary-700: #5a8a14;
    --lk-primary-800: #476d10;
    --lk-primary-900: #2d4a0a;

    --lk-dark-50:  #f5f5f5;
    --lk-dark-100: #e0e0e0;
    --lk-dark-200: #bdbdbd;
    --lk-dark-300: #9e9e9e;
    --lk-dark-400: #757575;
    --lk-dark-500: #383b3d;
    --lk-dark-600: #323436;
    --lk-dark-700: #2a2c2e;
    --lk-dark-800: #1a1c1e;
    --lk-dark-900: #090909;

    --lk-flaeche: #ffffff;
    --lk-grund: #fafafa;
    --lk-linie: #ececec;
    --lk-radius: 12px;
    --lk-radius-klein: 8px;
    --lk-schatten: 0 1px 2px rgba(9, 9, 9, .04), 0 8px 24px -12px rgba(9, 9, 9, .10);
    --lk-schatten-hoch: 0 2px 4px rgba(9, 9, 9, .05), 0 16px 40px -16px rgba(9, 9, 9, .18);

    /* Bootstrap auf die Palette umbiegen */
    --bs-primary: var(--lk-primary-600);
    --bs-primary-rgb: 130, 179, 54;
    --bs-body-font-family: 'Montserrat', system-ui, sans-serif;
    --bs-body-color: var(--lk-dark-800);
    --bs-body-bg: var(--lk-grund);
    --bs-border-color: var(--lk-linie);
    --bs-secondary-color: var(--lk-dark-400);
    --bs-link-color: var(--lk-primary-700);
    --bs-link-hover-color: var(--lk-primary-800);
    --bs-border-radius: var(--lk-radius-klein);
    --bs-focus-ring-color: rgba(134, 199, 36, .28);
}

/* --- Grundlagen ---------------------------------------------------------- */
body {
    font-family: 'Montserrat', system-ui, sans-serif;
    background: var(--lk-grund);
    color: var(--lk-dark-800);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--lk-dark-900);
}

/* Zahlen laufen in Tabellen sonst unruhig */
td, th, .lk-zahl, .lk-kennzahl {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* --- Kopfleiste ---------------------------------------------------------- */
.lk-navbar {
    background: var(--lk-dark-900);
    border-bottom: 1px solid var(--lk-dark-700);
}

.lk-navbar .navbar-brand {
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}
.lk-navbar .navbar-brand:hover {
    text-decoration: none;
}

/* Markenzeichen: der Serverprofis-Wuerfel */
.lk-mark {
    height: 30px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

.lk-login-marke .lk-mark {
    height: 42px;
}

.lk-navbar .nav-link {
    color: var(--lk-dark-200);
    font-weight: 500;
    font-size: .93rem;
    padding: .45rem .85rem;
    border-radius: var(--lk-radius-klein);
    transition: color .15s ease, background-color .15s ease;
}
.lk-navbar .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .06);
}
.lk-navbar .nav-link.active {
    color: var(--lk-primary-400);
    background: rgba(134, 199, 36, .12);
}

.lk-navbar .dropdown-menu {
    border: 1px solid var(--lk-linie);
    border-radius: var(--lk-radius);
    box-shadow: var(--lk-schatten-hoch);
    padding: .35rem;
}
.lk-navbar .dropdown-item {
    border-radius: 6px;
    font-size: .93rem;
    font-weight: 500;
    padding: .5rem .7rem;
}
.lk-navbar .dropdown-item:active {
    background: var(--lk-primary-600);
}

.lk-benutzer {
    color: var(--lk-dark-200);
    font-weight: 500;
    font-size: .93rem;
}

/* --- Karten -------------------------------------------------------------- */
.card {
    background: var(--lk-flaeche);
    border: 1px solid var(--lk-linie);
    border-radius: var(--lk-radius);
    box-shadow: var(--lk-schatten);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--lk-linie);
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: -0.01em;
    color: var(--lk-dark-900);
    padding: .95rem 1.15rem;
}

.card-body {
    padding: 1.15rem;
}

/* --- Kennzahlen ---------------------------------------------------------- */
.lk-kennzahl-karte {
    position: relative;
    overflow: hidden;
}

/* Feine Akzentkante oben, nur bei der hervorgehobenen Kachel farbig */
.lk-kennzahl-karte::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--lk-dark-100);
}
.lk-kennzahl-karte.lk-akzent::before {
    background: linear-gradient(90deg, var(--lk-primary-500), var(--lk-primary-300));
}

.lk-kennzahl {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--lk-dark-900);
}

.lk-kennzahl-label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--lk-dark-400);
    margin-bottom: .35rem;
}

.lk-kennzahl-fuss {
    font-size: .82rem;
    color: var(--lk-dark-400);
    margin-top: .15rem;
}

/* --- Statusanzeige ------------------------------------------------------- */
.lk-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 600;
    padding: .28rem .65rem .28rem .55rem;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.lk-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.lk-status-eingereicht { color: #92610a; background: #fff8e6; border-color: #f7e2b0; }
.lk-status-geprueft    { color: #1f6b7a; background: #eaf7fa; border-color: #b9e2ea; }
.lk-status-bezahlt     { color: var(--lk-primary-800); background: var(--lk-primary-50); border-color: var(--lk-primary-200); }
.lk-status-abgelehnt   { color: #9a2a2a; background: #fdeeee; border-color: #f3c6c6; }
.lk-status-storniert   { color: var(--lk-dark-400); background: var(--lk-dark-50); border-color: var(--lk-dark-100); }

/* --- Tabellen ------------------------------------------------------------ */
.table {
    --bs-table-hover-bg: var(--lk-primary-50);
    margin-bottom: 0;
}

.table > thead th {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--lk-dark-400);
    border-bottom: 1px solid var(--lk-linie);
    padding: .7rem .9rem;
    white-space: nowrap;
}

.table > tbody td {
    padding: .8rem .9rem;
    border-color: var(--lk-linie);
    vertical-align: middle;
}

.table > tbody tr:last-child td {
    border-bottom: 0;
}

.table tfoot th {
    background: var(--lk-dark-50);
    border-top: 1px solid var(--lk-linie);
    font-weight: 600;
    padding: .75rem .9rem;
}

.table-vcenter td,
.table-vcenter th {
    vertical-align: middle;
}

/* --- Schaltflaechen ------------------------------------------------------ */
.btn {
    font-weight: 600;
    font-size: .9rem;
    border-radius: var(--lk-radius-klein);
    padding: .5rem 1rem;
    transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    --bs-btn-bg: var(--lk-primary-500);
    --bs-btn-border-color: var(--lk-primary-500);
    --bs-btn-color: var(--lk-dark-900);
    --bs-btn-hover-bg: var(--lk-primary-600);
    --bs-btn-hover-border-color: var(--lk-primary-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--lk-primary-700);
    --bs-btn-active-border-color: var(--lk-primary-700);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--lk-primary-200);
    --bs-btn-disabled-border-color: var(--lk-primary-200);
    --bs-btn-disabled-color: var(--lk-dark-400);
    box-shadow: 0 6px 16px -10px rgba(134, 199, 36, .9);
}

.btn-success {
    --bs-btn-bg: var(--lk-primary-600);
    --bs-btn-border-color: var(--lk-primary-600);
    --bs-btn-hover-bg: var(--lk-primary-700);
    --bs-btn-hover-border-color: var(--lk-primary-700);
    --bs-btn-active-bg: var(--lk-primary-800);
}

.btn-outline-secondary {
    --bs-btn-color: var(--lk-dark-600);
    --bs-btn-border-color: var(--lk-dark-100);
    --bs-btn-hover-bg: var(--lk-dark-50);
    --bs-btn-hover-border-color: var(--lk-dark-200);
    --bs-btn-hover-color: var(--lk-dark-900);
    --bs-btn-active-bg: var(--lk-dark-100);
    --bs-btn-active-color: var(--lk-dark-900);
    --bs-btn-active-border-color: var(--lk-dark-200);
}

.btn-outline-primary {
    --bs-btn-color: var(--lk-primary-800);
    --bs-btn-border-color: var(--lk-primary-500);
    --bs-btn-bg: var(--lk-primary-50);
    --bs-btn-hover-bg: var(--lk-primary-500);
    --bs-btn-hover-border-color: var(--lk-primary-500);
    --bs-btn-hover-color: var(--lk-dark-900);
    --bs-btn-active-bg: var(--lk-primary-600);
    --bs-btn-active-border-color: var(--lk-primary-600);
    --bs-btn-active-color: #fff;
}

/* Auswahlfelder in Werkzeugleisten sollen ihren Inhalt nicht abschneiden.
   Bootstrap setzt in .input-group sonst width:1% und staucht das Feld, daher
   der spezifischere Selektor. */
.input-group > .form-select.lk-jahr-wahl {
    flex: 0 0 auto;
    width: auto;
    min-width: 7rem;
}

/* Ein Wert ueber der Strompreispauschale faellt so sofort ins Auge */
.lk-ueber-pauschale {
    color: #9a2a2a;
    font-weight: 600;
}
.lk-ueber-pauschale::after {
    content: '!';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: .35rem;
    border-radius: 50%;
    background: #f3c6c6;
    color: #9a2a2a;
    font-size: .65rem;
    font-weight: 700;
    vertical-align: 1px;
}

.btn-sm {
    font-size: .82rem;
    padding: .35rem .7rem;
}

/* --- Formulare ----------------------------------------------------------- */
.form-label {
    font-size: .84rem;
    font-weight: 600;
    color: var(--lk-dark-600);
    margin-bottom: .35rem;
}

.form-control,
.form-select {
    border-color: var(--lk-dark-100);
    border-radius: var(--lk-radius-klein);
    padding: .55rem .8rem;
    font-size: .95rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* Rechts muss der Auswahlpfeil Platz behalten, sonst ueberlappt er den Text */
.form-select {
    padding-right: 2.4rem;
}
.form-select-sm {
    padding-right: 2rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--lk-primary-400);
    box-shadow: 0 0 0 3px rgba(134, 199, 36, .18);
}

.form-control::placeholder {
    color: var(--lk-dark-300);
}

.form-text {
    font-size: .81rem;
    color: var(--lk-dark-400);
}

.form-check-input:checked {
    background-color: var(--lk-primary-500);
    border-color: var(--lk-primary-500);
}
.form-check-input:focus {
    border-color: var(--lk-primary-400);
    box-shadow: 0 0 0 3px rgba(134, 199, 36, .18);
}

/* --- Meldungen ----------------------------------------------------------- */
.alert {
    border-radius: var(--lk-radius);
    border-width: 1px;
    font-size: .92rem;
    padding: .85rem 1.05rem;
}
.alert-success {
    background: var(--lk-primary-50);
    border-color: var(--lk-primary-200);
    color: var(--lk-primary-900);
}
.alert-info {
    background: #f2f8fb;
    border-color: #cfe4ee;
    color: #1f5061;
}

/* Plausibilitaetshinweise sollen auffallen, ohne zu schreien */
.lk-warnung {
    display: flex;
    gap: .7rem;
    border: 1px solid #f2dfa8;
    background: #fffaef;
    color: #6d4a06;
    padding: .8rem 1rem;
    margin-bottom: .6rem;
    border-radius: var(--lk-radius);
    font-size: .9rem;
    line-height: 1.5;
}
.lk-warnung::before {
    content: '!';
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e9b949;
    color: #fff;
    font-weight: 700;
    font-size: .78rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: .05rem;
}

/* --- Anmeldung -----------------------------------------------------------
   Heller Grund mit zartem gruenen Schimmer, damit die Seite freundlich wirkt
   und das Logo mit seiner dunklen Wortmarke lesbar bleibt.
   ------------------------------------------------------------------------- */
/* Die Mitte bleibt reinweiss, damit der weisse Hintergrund des Logos nicht
   als Kasten sichtbar wird. Der gruene Schimmer liegt nur in den Ecken. */
.lk-login-seite {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(620px 380px at -5% -12%, rgba(134, 199, 36, .22), transparent 60%),
        radial-gradient(620px 380px at 105% 112%, rgba(134, 199, 36, .16), transparent 60%),
        #ffffff;
}

.lk-login-box {
    width: 100%;
    max-width: 410px;
}

.lk-login-box .card {
    border: 1px solid var(--lk-linie);
    border-radius: 16px;
    box-shadow: 0 2px 4px rgba(9, 9, 9, .04), 0 24px 60px -28px rgba(9, 9, 9, .28);
}

.lk-login-marke {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.lk-login-marke img {
    height: 76px;
    width: auto;
}

/* --- Fortschrittsbalken --------------------------------------------------
   Die Breite wird ueber vorgenerierte Klassen gesetzt statt per style-Attribut:
   die CSP erlaubt kein 'unsafe-inline' fuer Styles, inline gesetzte Breiten
   wuerden vom Browser verworfen.
   ------------------------------------------------------------------------- */
.lk-balken {
    height: 6px;
    background: var(--lk-dark-50);
    border-radius: 999px;
    overflow: hidden;
}
.lk-balken-fuell {
    height: 100%;
    background: linear-gradient(90deg, var(--lk-primary-500), var(--lk-primary-300));
    border-radius: 999px;
    transition: width .4s ease;
}

.lk-b-0   { width: 0; }
.lk-b-5   { width: 5%; }
.lk-b-10  { width: 10%; }
.lk-b-15  { width: 15%; }
.lk-b-20  { width: 20%; }
.lk-b-25  { width: 25%; }
.lk-b-30  { width: 30%; }
.lk-b-35  { width: 35%; }
.lk-b-40  { width: 40%; }
.lk-b-45  { width: 45%; }
.lk-b-50  { width: 50%; }
.lk-b-55  { width: 55%; }
.lk-b-60  { width: 60%; }
.lk-b-65  { width: 65%; }
.lk-b-70  { width: 70%; }
.lk-b-75  { width: 75%; }
.lk-b-80  { width: 80%; }
.lk-b-85  { width: 85%; }
.lk-b-90  { width: 90%; }
.lk-b-95  { width: 95%; }
.lk-b-100 { width: 100%; }

/* --- Hilfsklassen statt inline-Styles ------------------------------------ */
.lk-spalte-balken { width: 26%; }
.lk-breite-auto   { width: auto; }

/* Gegenueberstellung Belegpreis / nachgewiesener Preis / Pauschale */
.lk-preisvergleich {
    font-size: .85rem;
    --bs-table-bg: transparent;
}
.lk-preisvergleich td {
    padding: .3rem .4rem;
    border-color: var(--lk-linie);
}
.lk-preisvergleich tr:first-child td {
    font-weight: 600;
    border-top: 0;
}
.lk-preisvergleich tr:last-child td {
    border-bottom: 0;
}

/* Fehlender Nachweis soll auffallen, ohne wie ein Fehler zu wirken */
.lk-fehlt {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    padding: .12rem .5rem;
    border-radius: 999px;
    color: #92610a;
    background: #fff8e6;
    border: 1px solid #f7e2b0;
}

/* --- Eigene Fahrzeuge -----------------------------------------------------
   Ein laufend zugewiesenes Fahrzeug bekommt eine pulsierende Leuchtdiode,
   ein abgegebenes wird zurueckgenommen. So sieht man auf einen Blick, welches
   Auto gerade das eigene ist.
   ------------------------------------------------------------------------- */
.lk-led {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: .45rem;
    border-radius: 50%;
    background: var(--lk-primary-500);
    box-shadow: 0 0 0 0 rgba(134, 199, 36, .7);
    animation: lk-puls 2s cubic-bezier(.66, 0, .34, 1) infinite;
    vertical-align: 1px;
}

@keyframes lk-puls {
    0%   { box-shadow: 0 0 0 0 rgba(134, 199, 36, .65); }
    70%  { box-shadow: 0 0 0 7px rgba(134, 199, 36, 0); }
    100% { box-shadow: 0 0 0 0 rgba(134, 199, 36, 0); }
}

.lk-fahrzeug-abgegeben {
    opacity: .62;
    filter: saturate(.55);
}
.lk-fahrzeug-abgegeben:hover,
.lk-fahrzeug-abgegeben:focus-within {
    opacity: 1;
    filter: none;
}

/* Kennzahlenzeile innerhalb einer Fahrzeugkarte */
.lk-fahrzeug-summen {
    border-bottom: 1px solid var(--lk-linie);
}
.lk-fahrzeug-summen > div {
    padding: 1rem 1.15rem;
}
.lk-fahrzeug-summen > div + div {
    border-left: 1px solid var(--lk-linie);
}
.lk-fahrzeug-summen .lk-kennzahl {
    font-size: 1.35rem;
}

@media (max-width: 991px) {
    .lk-fahrzeug-summen > div:nth-child(3) {
        border-left: 0;
    }
    .lk-fahrzeug-summen > div:nth-child(n+3) {
        border-top: 1px solid var(--lk-linie);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lk-led {
        animation: none;
        box-shadow: 0 0 0 3px rgba(134, 199, 36, .3);
    }
}

/* --- Markenlogos --------------------------------------------------------- */
.lk-markenlogo {
    width: auto;
    max-width: 64px;
    object-fit: contain;
    vertical-align: middle;
}

.lk-logo-zelle {
    width: 68px;
}

/* --- Upload -------------------------------------------------------------- */
.lk-dropzone {
    border: 2px dashed var(--lk-dark-100);
    border-radius: var(--lk-radius);
    padding: 1.6rem 1.2rem;
    background: var(--lk-dark-50);
    transition: border-color .15s ease, background-color .15s ease;
}
.lk-dropzone:hover,
.lk-dropzone:focus-within {
    border-color: var(--lk-primary-400);
    background: var(--lk-primary-50);
}

/* --- Modale -------------------------------------------------------------- */
.modal-content {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 30px 70px -25px rgba(9, 9, 9, .45);
}
.modal-header,
.modal-footer {
    border-color: var(--lk-linie);
    padding: 1rem 1.15rem;
}
.modal-body {
    padding: 1.15rem;
}

/* --- Fusszeile ----------------------------------------------------------- */
.lk-fusszeile {
    border-top: 1px solid var(--lk-linie);
    margin-top: 3rem;
    padding: 1.4rem 0;
    font-size: .82rem;
    color: var(--lk-dark-400);
}

/* --- Bewegung ------------------------------------------------------------
   Ein einziger gestaffelter Auftritt beim Laden. Dezent, damit das Werkzeug
   nicht verspielt wirkt.
   ------------------------------------------------------------------------- */
@keyframes lk-auf {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.lk-auftritt > * {
    animation: lk-auf .45s cubic-bezier(.22, .8, .32, 1) both;
}
.lk-auftritt > *:nth-child(1) { animation-delay: .02s; }
.lk-auftritt > *:nth-child(2) { animation-delay: .07s; }
.lk-auftritt > *:nth-child(3) { animation-delay: .12s; }
.lk-auftritt > *:nth-child(4) { animation-delay: .17s; }

@media (prefers-reduced-motion: reduce) {
    .lk-auftritt > *,
    .lk-balken-fuell,
    .btn {
        animation: none !important;
        transition: none !important;
    }
}

/* --- Kleine Bildschirme -------------------------------------------------- */
@media (max-width: 576px) {
    .lk-kennzahl {
        font-size: 1.35rem;
    }
    .card-body {
        padding: 1rem;
    }
    .lk-fusszeile {
        margin-top: 2rem;
    }
}

/* --- Importadresse im Profil --------------------------------------------- */
.lk-postfach {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem .9rem;
    border: 1px solid var(--lk-primary-200);
    border-left: 3px solid var(--lk-primary-500);
    border-radius: .5rem;
    background: var(--lk-primary-50);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--lk-primary-900);
    word-break: break-all;
}

.lk-postfach-kopie {
    flex: none;
    margin-left: auto;
    padding: .15rem .55rem;
    border: 1px solid var(--lk-primary-300);
    border-radius: .35rem;
    background: #fff;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 600;
    color: var(--lk-primary-700);
    cursor: pointer;
}

.lk-postfach-kopie:hover {
    border-color: var(--lk-primary-500);
    background: var(--lk-primary-100);
}

/* --- Kopierknopf als Icon ------------------------------------------------ */
.lk-kopie {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    border: 1px solid var(--lk-primary-300);
    border-radius: .35rem;
    background: #fff;
    color: var(--lk-primary-700);
    cursor: pointer;
}

.lk-kopie:hover {
    border-color: var(--lk-primary-500);
    background: var(--lk-primary-100);
}

.lk-kopie-bild {
    width: .95rem;
    height: .95rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Standard sichtbar, Rueckmeldung erst per Zustandsklasse aus js/app.js */
.lk-kopie-ok,
.lk-kopie-fehler,
.lk-kopie.is-kopiert .lk-kopie-standard,
.lk-kopie.is-fehler .lk-kopie-standard {
    display: none;
}

.lk-kopie.is-kopiert .lk-kopie-ok,
.lk-kopie.is-fehler .lk-kopie-fehler {
    display: block;
}

.lk-kopie.is-kopiert {
    border-color: var(--lk-primary-500);
    background: var(--lk-primary-100);
    color: var(--lk-primary-700);
}

.lk-kopie.is-fehler {
    border-color: var(--bs-danger-border-subtle, #f1aeb5);
    background: var(--bs-danger-bg-subtle, #f8d7da);
    color: var(--bs-danger-text-emphasis, #58151c);
}

/* --- Zahlungsdaten zum Abtippen ins Banking ------------------------------ */
.lk-zahlungsdaten {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.lk-zd-zeile {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.lk-zd-feld {
    flex: none;
    min-width: 8.5rem;
}

.lk-zd-zeile code {
    color: var(--lk-primary-900);
    background: var(--lk-primary-50);
    padding: .1rem .4rem;
    border-radius: .3rem;
}

/* Hilfsfeld fuer den Kopier-Rueckfall in aelteren Browsern */
.lk-versteckt {
    position: fixed;
    top: -1000px;
    left: -1000px;
    opacity: 0;
}