/*
 * L&R Zahlungsportal
 * Farben, Schriften, Button- und Schattenstil sind aus dem Auftritt lohmann-robinski.de übernommen
 * (normalize.css / main.css): Rot #E2001A, Anthrazit #293133, Playfair Display + Source Sans Pro,
 * 1px-Radius, Material-Schatten, kursive Serifen-Buttons. Mobile first.
 */

/* ---------------------------------------------------------------- Schriften (selbst gehostet, keine Drittanbieter-Requests) */
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/playfair-display-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/playfair-display-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 600; font-display: swap; src: url('../fonts/playfair-display-latin-600-italic.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/playfair-display-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/source-sans-pro-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/source-sans-pro-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/source-sans-pro-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/source-sans-pro-latin-700-normal.woff2') format('woff2'); }

:root {
    --lr-red: #e2001a;
    --lr-red-dark: #b90015;
    --lr-red-deep: #4a0008;
    --lr-ink: #293133;
    --lr-grey: #98a7ab;
    --lr-grey-text: #66757a;
    --lr-line: #dde2e4;
    --lr-mist: #edf1f2;
    --lr-paper: #fafbfb;
    --lr-white: #fff;
    --ok: #1d7a46;
    --ok-bg: #e8f4ec;
    --warn: #9a5b00;
    --warn-bg: #fdf3e0;
    --bad-bg: #fde8ea;

    --serif: 'Playfair Display', Georgia, serif;
    --sans: 'Source Sans Pro', 'Segoe UI', Helvetica, Arial, sans-serif;
    --shadow-1: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
    --shadow-2: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);
    --radius: 1px;
}

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

html { font-size: 16px; -webkit-text-size-adjust: 100%; }
@media (min-width: 640px) { html { font-size: 17px; } }

body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--lr-mist);
    color: var(--lr-ink);
    font-family: var(--sans);
    font-weight: 400;
    line-height: 1.55;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.2; margin: 0; }
/* Playfair setzt standardmäßig Mediävalziffern – für Beträge und Termine sind Versalziffern besser lesbar */
h1, h2, h3, legend, .plan-summary, .card__value, .amounts .amounts__main dd { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; }
p { margin: 0 0 .75rem; }
a { color: var(--lr-red-dark); }
a:hover { color: var(--lr-red-deep); }
small, .small { font-size: .85rem; }
.muted { color: var(--lr-grey-text); }
.nowrap { white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--lr-red); outline-offset: 2px; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- Kopf / Fuß */
.brandbar { height: 4px; background: var(--lr-red); }

.site-header {
    background: var(--lr-white);
    box-shadow: var(--shadow-1);
    position: relative;
    z-index: 2;
}
.site-header__inner {
    max-width: 46rem;
    margin: 0 auto;
    padding: .9rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.site-header--wide .site-header__inner { max-width: 74rem; }

.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--lr-ink); }
.brand img { display: block; height: 30px; width: auto; max-width: 60vw; }
/* Platzhalter, bis die originale Logodatei unter public/assets/img/logo.svg liegt */
.brand__wordmark { font-family: var(--sans); font-weight: 300; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; }
.site-header__label { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lr-grey-text); text-align: right; }

.testmode {
    background: var(--lr-ink);
    color: var(--lr-white);
    text-align: center;
    font-size: .8rem;
    letter-spacing: .08em;
    padding: .4rem 1rem;
}
.testmode strong { color: #ffd36b; font-weight: 700; margin-right: .5rem; }

main { flex: 1; width: 100%; max-width: 46rem; margin: 0 auto; padding: 1.25rem 1rem 2.5rem; }
main.wide { max-width: 74rem; }
@media (min-width: 640px) { main { padding: 2.25rem 1.25rem 3.5rem; } }

.site-footer {
    background: var(--lr-ink);
    color: #c9d2d5;
    font-size: .85rem;
    padding: 1.5rem 1.25rem;
    text-align: center;
}
.site-footer a { color: var(--lr-white); text-decoration: none; margin: 0 .6rem; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__secure { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: .6rem; }
.site-footer__secure svg { width: 14px; height: 14px; fill: currentColor; flex: none; }

/* ---------------------------------------------------------------- Dokument (Kundenseite) */
.sheet { background: var(--lr-white); box-shadow: var(--shadow-1); border-radius: var(--radius); }
.sheet__section { padding: 1.4rem 1.25rem; border-top: 1px solid var(--lr-line); }
.sheet__section:first-child { border-top: 0; }
@media (min-width: 640px) { .sheet__section { padding: 1.9rem 2.25rem; } }

.eyebrow {
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--lr-red);
    margin: 0 0 .6rem;
}
.eyebrow--grey { color: var(--lr-grey-text); }

.recipient { font-size: 1.15rem; font-weight: 600; margin: 0; }
.recipient + p { margin: .1rem 0 0; color: var(--lr-grey-text); }
.lead { font-weight: 300; font-size: 1.05rem; white-space: pre-line; margin: .6rem 0 0; }
.refs { margin: .9rem 0 0; font-size: .85rem; color: var(--lr-grey-text); display: flex; flex-wrap: wrap; gap: .1rem 1.2rem; }

.amounts { margin: 0; }
.amounts div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .3rem 0; }
.amounts dt { color: var(--lr-grey-text); }
.amounts dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.amounts .amounts__main dt { color: var(--lr-ink); font-weight: 600; }
.amounts .amounts__main dd { font-family: var(--serif); font-size: 1.6rem; }
.amounts .amounts__total { border-top: 1px solid var(--lr-line); margin-top: .35rem; padding-top: .6rem; font-weight: 600; }
.amounts .amounts__total dt { color: var(--lr-ink); }

.facts { display: grid; grid-template-columns: 1fr; gap: .9rem 1.5rem; margin: 0; }
@media (min-width: 480px) { .facts { grid-template-columns: 1fr 1fr; } }
.facts dt { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lr-grey-text); }
.facts dd { margin: .1rem 0 0; font-size: 1.05rem; }

.plan-summary { font-family: var(--serif); font-size: 1.3rem; margin: 0 0 1rem; }

details.schedule { margin-top: 1.1rem; border: 1px solid var(--lr-line); border-radius: var(--radius); }
details.schedule summary { cursor: pointer; padding: .7rem .9rem; font-weight: 600; list-style-position: inside; }
details.schedule[open] summary { border-bottom: 1px solid var(--lr-line); }

table { border-collapse: collapse; width: 100%; }
.table th, .table td { padding: .5rem .9rem; text-align: left; border-bottom: 1px solid var(--lr-line); vertical-align: top; }
.table th { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lr-grey-text); font-weight: 600; white-space: nowrap; }
.table th.num, .table td.num { text-align: right; }
.table tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Zustimmung + Zahlung */
.consent { display: flex; gap: .8rem; align-items: flex-start; padding: .9rem; background: var(--lr-paper); border: 1px solid var(--lr-line); border-radius: var(--radius); cursor: pointer; }
.consent input { flex: none; width: 1.35rem; height: 1.35rem; margin: .1rem 0 0; accent-color: var(--lr-red); cursor: pointer; }
.consent.is-invalid { border-color: var(--lr-red); background: var(--bad-bg); }

.pay-method { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.6rem 0 .8rem; }
.pay-method h2 { font-size: 1.15rem; }
#payment-element { min-height: 3rem; }
.pay-note { font-size: .85rem; color: var(--lr-grey-text); margin: .9rem 0 0; }

/* Buttons – .btn / .btnRaised der L&R-Website */
.btn {
    display: inline-block;
    border: 0;
    border-radius: var(--radius);
    background: var(--lr-paper);
    color: var(--lr-ink);
    box-shadow: var(--shadow-1);
    padding: .8rem 1.2rem;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1rem;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow .2s, background-color .2s;
}
.btn:hover { background: var(--lr-mist); box-shadow: var(--shadow-2); color: var(--lr-ink); }
.btn--primary { background: var(--lr-red); color: var(--lr-white); font-weight: 600; }
.btn--primary:hover { background: var(--lr-red-deep); color: var(--lr-white); }
.btn--danger { color: var(--lr-red-dark); }
.btn--block { display: block; width: 100%; text-align: center; padding: 1rem 1.2rem; font-size: 1.1rem; margin-top: 1.4rem; }
.btn--small { padding: .45rem .8rem; font-size: .9rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn.is-loading { position: relative; color: transparent; }
.btn.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-loading::after { animation-duration: 2s; } .btn { transition: none; } }

/* Hinweise */
.notice { padding: .85rem 1rem; border-left: 3px solid var(--lr-grey); background: var(--lr-paper); margin: 0 0 1.25rem; border-radius: var(--radius); }
.notice--error { border-color: var(--lr-red); background: var(--bad-bg); }
.notice--success { border-color: var(--ok); background: var(--ok-bg); }
.notice--warn { border-color: var(--warn); background: var(--warn-bg); }
.notice p:last-child { margin-bottom: 0; }

.status-hero { text-align: center; padding: 2.2rem 1.25rem 1.8rem; }
.status-hero__icon { width: 3.2rem; height: 3.2rem; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; background: var(--ok-bg); color: var(--ok); }
.status-hero__icon svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.status-hero--pending .status-hero__icon { background: var(--warn-bg); color: var(--warn); }
.status-hero--problem .status-hero__icon { background: var(--bad-bg); color: var(--lr-red-dark); }
.status-hero p { max-width: 30rem; margin: .6rem auto 0; color: var(--lr-grey-text); }

/* Status-Badges */
.badge { display: inline-block; padding: .1rem .55rem; border-radius: 10px; font-size: .75rem; font-weight: 600; letter-spacing: .03em; white-space: nowrap; background: var(--lr-mist); color: var(--lr-grey-text); }
.badge--active, .badge--paid, .badge--completed { background: var(--ok-bg); color: var(--ok); }
.badge--open, .badge--accepted, .badge--payment_method_setup, .badge--processing, .badge--draft { background: var(--warn-bg); color: var(--warn); }
.badge--past_due, .badge--failed, .badge--uncollectible { background: var(--bad-bg); color: var(--lr-red-dark); }

.contact { font-size: .9rem; color: var(--lr-grey-text); text-align: center; margin: 1.5rem 0 0; }
.contact a { white-space: nowrap; }

/* ---------------------------------------------------------------- Admin */
.admin-nav { display: flex; align-items: center; gap: .25rem 1.1rem; flex-wrap: wrap; justify-content: flex-end; font-size: .95rem; }
.admin-nav a { color: var(--lr-ink); text-decoration: none; padding: .2rem 0; border-bottom: 2px solid transparent; }
.admin-nav a:hover, .admin-nav a[aria-current] { border-color: var(--lr-red); }
.admin-nav form { margin: 0; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--lr-grey-text); cursor: pointer; text-decoration: underline; }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.page-head p { margin: .3rem 0 0; color: var(--lr-grey-text); }

.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; margin-bottom: 1.6rem; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .cards { grid-template-columns: repeat(6, 1fr); } }
.card { background: var(--lr-white); box-shadow: var(--shadow-1); border-radius: var(--radius); padding: 1rem; text-decoration: none; color: var(--lr-ink); display: block; border-top: 3px solid transparent; transition: box-shadow .2s; }
a.card:hover { box-shadow: var(--shadow-2); color: var(--lr-ink); }
.card.is-active { border-top-color: var(--lr-red); }
.card__value { font-family: var(--serif); font-size: 1.9rem; line-height: 1.1; }
.card__label { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--lr-grey-text); margin-top: .3rem; }
.card--alert .card__value { color: var(--lr-red-dark); }

.panel { background: var(--lr-white); box-shadow: var(--shadow-1); border-radius: var(--radius); margin-bottom: 1.5rem; }
.panel__head { padding: .9rem 1.1rem; border-bottom: 1px solid var(--lr-line); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.panel__head h2 { font-size: 1.1rem; }
.panel__body { padding: 1.1rem; }
.panel .table th:first-child, .panel .table td:first-child { padding-left: 1.1rem; }
.panel .table th:last-child, .panel .table td:last-child { padding-right: 1.1rem; }
.empty { padding: 2rem 1rem; text-align: center; color: var(--lr-grey-text); }

.filters { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filters a { font-size: .85rem; padding: .25rem .7rem; border-radius: 12px; background: var(--lr-white); color: var(--lr-ink); text-decoration: none; box-shadow: var(--shadow-1); }
.filters a[aria-current] { background: var(--lr-ink); color: var(--lr-white); }

/* Tabellen werden auf kleinen Bildschirmen zu Karten */
@media (max-width: 719px) {
    .table--stack thead { display: none; }
    .table--stack tr { display: block; padding: .7rem 1.1rem; border-bottom: 1px solid var(--lr-line); }
    .table--stack tr:last-child { border-bottom: 0; }
    .table--stack td { display: flex; justify-content: space-between; gap: 1rem; padding: .15rem 0 !important; border: 0; text-align: right; }
    .table--stack td::before { content: attr(data-label); color: var(--lr-grey-text); font-size: .8rem; text-align: left; flex: none; }
    .table--stack td.table__title { display: block; text-align: left; font-weight: 600; padding-bottom: .3rem !important; }
    .table--stack td.table__title::before { content: none; }
}

.split { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
@media (min-width: 960px) { .sticky { position: sticky; top: 1rem; } }

/* Formulare */
fieldset { border: 0; padding: 0; margin: 0 0 1.6rem; min-width: 0; }
legend { font-family: var(--serif); font-size: 1.15rem; padding: 0; margin-bottom: .8rem; }
.grid { display: grid; gap: .9rem 1rem; grid-template-columns: 1fr; }
@media (min-width: 600px) { .grid--2 { grid-template-columns: 1fr 1fr; } .grid--3 { grid-template-columns: 1fr 2fr 1fr; } .span-2 { grid-column: span 2; } }
.field label, .field .label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .25rem; }
.field .hint { font-size: .8rem; color: var(--lr-grey-text); margin-top: .2rem; }
.field .error { font-size: .85rem; color: var(--lr-red-dark); margin-top: .25rem; }
.req { color: var(--lr-red); }

input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea {
    width: 100%;
    font: inherit;
    color: var(--lr-ink);
    background: var(--lr-white);
    border: 1px solid #c3ccd0;
    border-radius: var(--radius);
    padding: .6rem .7rem;
    min-height: 2.75rem;
}
textarea { min-height: 6.5rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--lr-red); outline: 0; box-shadow: 0 0 0 3px rgba(226, 0, 26, .15); }
.is-invalid input, .is-invalid select, .is-invalid textarea { border-color: var(--lr-red); }

.choice { display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 600px) { .choice { grid-template-columns: 1fr 1fr; } }
.choice label { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem .9rem; border: 1px solid #c3ccd0; border-radius: var(--radius); cursor: pointer; background: var(--lr-white); }
.choice input { margin-top: .25rem; accent-color: var(--lr-red); }
.choice label:has(input:checked) { border-color: var(--lr-red); box-shadow: inset 0 0 0 1px var(--lr-red); }
.choice strong { display: block; }
.choice span span { font-size: .85rem; color: var(--lr-grey-text); }

.actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.actions form { margin: 0; }

.preview dl { margin: 0; }
.preview dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px dashed var(--lr-line); }
.preview dl div:last-child { border-bottom: 0; }
.preview dt { color: var(--lr-grey-text); }
.preview dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }

.copy { display: flex; gap: .5rem; }
.copy input { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }

.kv { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; font-size: .95rem; }
.kv dt { color: var(--lr-grey-text); }
.kv dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }

progress { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 8px; border: 0; border-radius: 4px; background: var(--lr-mist); overflow: hidden; margin: .5rem 0 1rem; }
progress::-webkit-progress-bar { background: var(--lr-mist); }
progress::-webkit-progress-value { background: var(--ok); }
progress::-moz-progress-bar { background: var(--ok); }

.login { max-width: 24rem; margin: 8vh auto 0; }
.login .panel__body { padding: 1.6rem; }
.login .field { margin-bottom: 1rem; }

dialog { border: 0; border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 1.5rem; max-width: 28rem; width: calc(100% - 2rem); color: var(--lr-ink); }
dialog::backdrop { background: rgba(41, 49, 51, .55); }
dialog h2 { margin-bottom: .6rem; }
dialog .actions { margin-top: 1.2rem; justify-content: flex-end; }

@media print {
    body { background: #fff; }
    .site-footer, .testmode, .btn, .pay-block { display: none !important; }
    .sheet { box-shadow: none; }
}