1134 lines
40 KiB
Vue
1134 lines
40 KiB
Vue
<script setup>
|
|
import AppLayout from '@/layouts/AppLayout.vue'
|
|
import { ref, computed } from 'vue'
|
|
|
|
const steps = [
|
|
{ number: 1, label: 'Empfänger' },
|
|
{ number: 2, label: 'Positionen' },
|
|
{ number: 3, label: 'Vorschau & Freigabe' },
|
|
]
|
|
|
|
const currentStep = ref(1)
|
|
const pdfLoading = ref(false)
|
|
|
|
const today = new Date().toISOString().split('T')[0]
|
|
const in14Days = new Date(Date.now() + 14 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
|
|
|
|
const form = ref({
|
|
kontaktSuche: '',
|
|
organisation: '',
|
|
anrede: '',
|
|
vorname: '',
|
|
nachname: '',
|
|
adresse: '',
|
|
plz: '',
|
|
ort: '',
|
|
email: '',
|
|
rechnungsnummer: '',
|
|
rechnungsdatum: today,
|
|
zahlungsziel: in14Days,
|
|
bic: '',
|
|
iban: '',
|
|
absenderEmail: 'finanzen@sachsen.pfadfinden.de',
|
|
absenderTelefon: '',
|
|
datenSpeichern: false,
|
|
positionen: [
|
|
{ bezeichnung: '', menge: 1, einheit: 'Stk.', einzelpreis: '' },
|
|
],
|
|
mwstSatz: 19,
|
|
})
|
|
|
|
const nettoSumme = computed(() =>
|
|
form.value.positionen.reduce((sum, p) => {
|
|
return sum + (parseFloat(p.menge) || 0) * (parseFloat(p.einzelpreis) || 0)
|
|
}, 0)
|
|
)
|
|
const mwstBetrag = computed(() => nettoSumme.value * form.value.mwstSatz / 100)
|
|
const brutto = computed(() => nettoSumme.value + mwstBetrag.value)
|
|
|
|
function posGesamt(pos) {
|
|
return (parseFloat(pos.menge) || 0) * (parseFloat(pos.einzelpreis) || 0)
|
|
}
|
|
|
|
function formatPreis(value) {
|
|
return (parseFloat(value) || 0).toLocaleString('de-DE', {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2,
|
|
}) + ' €'
|
|
}
|
|
|
|
function addPosition() {
|
|
form.value.positionen.push({ bezeichnung: '', menge: 1, einheit: 'Stk.', einzelpreis: '' })
|
|
}
|
|
|
|
function removePosition(i) {
|
|
if (form.value.positionen.length > 1) {
|
|
form.value.positionen.splice(i, 1)
|
|
}
|
|
}
|
|
|
|
async function openPdf() {
|
|
pdfLoading.value = true
|
|
try {
|
|
const csrf = document.querySelector('meta[name="csrf-token"]')?.content ?? ''
|
|
const res = await fetch('/rechnung/pdf', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf },
|
|
body: JSON.stringify(form.value),
|
|
})
|
|
if (!res.ok) return
|
|
const blob = await res.blob()
|
|
window.open(URL.createObjectURL(blob), '_blank')
|
|
} finally {
|
|
pdfLoading.value = false
|
|
}
|
|
}
|
|
|
|
const habenPositionen = computed(() =>
|
|
form.value.positionen.some(p => p.bezeichnung.trim() !== '')
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout title="Rechnung erstellen">
|
|
<div class="page">
|
|
|
|
<!-- ── Breadcrumb + Aktionen ── -->
|
|
<div class="page-header">
|
|
<nav class="breadcrumb">
|
|
<a href="/" class="bc-link">Startseite</a>
|
|
<font-awesome-icon icon="chevron-right" class="bc-sep" />
|
|
<span class="bc-current">Rechnung erstellen</span>
|
|
</nav>
|
|
<div class="header-actions">
|
|
<a href="/" class="btn-cancel">Abbrechen</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Stepper ── -->
|
|
<div class="stepper">
|
|
<template v-for="(step, i) in steps" :key="step.number">
|
|
<div class="step"
|
|
:class="{
|
|
'step--active': step.number === currentStep,
|
|
'step--done': step.number < currentStep,
|
|
'step--future': step.number > currentStep,
|
|
}">
|
|
<div class="step-circle">
|
|
<font-awesome-icon v-if="step.number < currentStep" icon="check" />
|
|
<span v-else>{{ step.number }}</span>
|
|
</div>
|
|
<span class="step-label">{{ step.label }}</span>
|
|
</div>
|
|
<div v-if="i < steps.length - 1" class="step-connector"></div>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- ── Seitentitel ── -->
|
|
<div class="page-title">
|
|
<div class="title-icon">
|
|
<font-awesome-icon icon="file-invoice" />
|
|
</div>
|
|
<div>
|
|
<h1 class="title-text">Rechnung erstellen</h1>
|
|
<p class="title-sub">Erstelle eine Rechnung nach BdP Vorlage.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Hauptbereich ── -->
|
|
<div class="main-grid">
|
|
|
|
<!-- ── SCHRITT 1: Empfänger ── -->
|
|
<div v-if="currentStep === 1" class="card">
|
|
<h2 class="card-heading">Empfänger</h2>
|
|
|
|
<div class="search-row">
|
|
<div class="search-wrap">
|
|
<font-awesome-icon icon="magnifying-glass" class="search-icon" />
|
|
<input
|
|
type="text"
|
|
v-model="form.kontaktSuche"
|
|
placeholder="Kontakt suchen..."
|
|
class="input search-input"
|
|
/>
|
|
</div>
|
|
<button class="btn-outline">
|
|
<font-awesome-icon icon="user" />
|
|
Neuer Kontakt
|
|
</button>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="fields">
|
|
<div class="field">
|
|
<label class="label">Firma / Organisation</label>
|
|
<input type="text" class="input" v-model="form.organisation" placeholder="BdP Landesverband e.V." />
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="label">Anrede</label>
|
|
<select class="input" v-model="form.anrede">
|
|
<option value="">— bitte wählen —</option>
|
|
<option>Herr</option>
|
|
<option>Frau</option>
|
|
<option>Divers</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="field-row">
|
|
<div class="field">
|
|
<label class="label">Vorname</label>
|
|
<input type="text" class="input" v-model="form.vorname" placeholder="Max" />
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">Nachname</label>
|
|
<input type="text" class="input" v-model="form.nachname" placeholder="Mustermann" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="label">Adresse</label>
|
|
<input type="text" class="input" v-model="form.adresse" placeholder="Musterstraße 1" />
|
|
</div>
|
|
|
|
<div class="field-row">
|
|
<div class="field field--plz">
|
|
<label class="label">PLZ</label>
|
|
<input type="text" class="input" v-model="form.plz" placeholder="12345" />
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">Ort</label>
|
|
<input type="text" class="input" v-model="form.ort" placeholder="Musterstadt" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="label">E-Mail</label>
|
|
<input type="email" class="input" v-model="form.email" placeholder="max@mustermann.de" />
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="field-row">
|
|
<div class="field">
|
|
<label class="label">Rechnungsnummer</label>
|
|
<input type="text" class="input" v-model="form.rechnungsnummer" placeholder="2024-001" />
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">Rechnungsdatum</label>
|
|
<input type="date" class="input" v-model="form.rechnungsdatum" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="label">Zahlungsziel</label>
|
|
<input type="date" class="input" v-model="form.zahlungsziel" />
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="field">
|
|
<label class="label">IBAN</label>
|
|
<input type="text" class="input" v-model="form.iban" placeholder="DE12 3456 7890 1234 5678 90" />
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="label">BIC</label>
|
|
<input type="text" class="input" v-model="form.bic" placeholder="BELADEBEXXX" />
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="field">
|
|
<label class="label">Absender-E-Mail</label>
|
|
<input type="email" class="input" v-model="form.absenderEmail" placeholder="finanzen@sachsen.pfadfinden.de" />
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="label">Telefon (optional)</label>
|
|
<input type="tel" class="input" v-model="form.absenderTelefon" placeholder="+49 123 456789" />
|
|
</div>
|
|
</div>
|
|
|
|
<label class="dsgvo-row">
|
|
<input type="checkbox" class="checkbox" v-model="form.datenSpeichern" />
|
|
<span>
|
|
Daten für diesen Kontakt speichern und bei künftigen Rechnungen vorausfüllen.
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- ── SCHRITT 2: Positionen ── -->
|
|
<div v-else-if="currentStep === 2" class="card">
|
|
<h2 class="card-heading">Positionen</h2>
|
|
|
|
<div class="pos-table-wrap">
|
|
<table class="pos-edit-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="col-nr">Nr.</th>
|
|
<th class="col-bez">Bezeichnung</th>
|
|
<th class="col-menge">Menge</th>
|
|
<th class="col-einheit">Einheit</th>
|
|
<th class="col-preis">Einzelpreis</th>
|
|
<th class="col-gesamt">Gesamt</th>
|
|
<th class="col-del"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(pos, i) in form.positionen" :key="i">
|
|
<td class="col-nr td-nr">{{ i + 1 }}</td>
|
|
<td class="col-bez">
|
|
<input
|
|
type="text"
|
|
class="pos-input pos-input--wide"
|
|
v-model="pos.bezeichnung"
|
|
placeholder="Bezeichnung der Leistung"
|
|
/>
|
|
</td>
|
|
<td class="col-menge">
|
|
<input
|
|
type="number"
|
|
class="pos-input pos-input--num"
|
|
v-model="pos.menge"
|
|
min="0"
|
|
step="1"
|
|
/>
|
|
</td>
|
|
<td class="col-einheit">
|
|
<select class="pos-input pos-select" v-model="pos.einheit">
|
|
<option>Stk.</option>
|
|
<option>Std.</option>
|
|
<option>Tage</option>
|
|
<option>Pauschal</option>
|
|
</select>
|
|
</td>
|
|
<td class="col-preis">
|
|
<div class="preis-wrap">
|
|
<input
|
|
type="number"
|
|
class="pos-input pos-input--num"
|
|
v-model="pos.einzelpreis"
|
|
min="0"
|
|
step="0.01"
|
|
placeholder="0,00"
|
|
/>
|
|
<span class="preis-suffix">€</span>
|
|
</div>
|
|
</td>
|
|
<td class="col-gesamt td-gesamt">{{ formatPreis(posGesamt(pos)) }}</td>
|
|
<td class="col-del">
|
|
<button
|
|
class="del-btn"
|
|
:disabled="form.positionen.length === 1"
|
|
@click="removePosition(i)"
|
|
title="Position entfernen"
|
|
>
|
|
<font-awesome-icon icon="trash" />
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<button class="add-pos-btn" @click="addPosition">
|
|
<font-awesome-icon icon="plus" />
|
|
Position hinzufügen
|
|
</button>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="summen-row">
|
|
<div class="mwst-group">
|
|
<span class="mwst-label">Mehrwertsteuer</span>
|
|
<div class="mwst-badges">
|
|
<button
|
|
v-for="satz in [0, 7, 19]"
|
|
:key="satz"
|
|
class="mwst-badge"
|
|
:class="{ 'mwst-badge--active': form.mwstSatz === satz }"
|
|
@click="form.mwstSatz = satz"
|
|
>
|
|
{{ satz }} %
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<table class="summen-table">
|
|
<tr>
|
|
<td class="sum-key">Nettobetrag</td>
|
|
<td class="sum-val">{{ formatPreis(nettoSumme) }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="sum-key">zzgl. {{ form.mwstSatz }} % MwSt.</td>
|
|
<td class="sum-val">{{ formatPreis(mwstBetrag) }}</td>
|
|
</tr>
|
|
<tr class="sum-total-row">
|
|
<td class="sum-key">Gesamtbetrag</td>
|
|
<td class="sum-val sum-val--total">{{ formatPreis(brutto) }}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── SCHRITT 3: Vorschau & Freigabe ── -->
|
|
<div v-else class="card release-card">
|
|
<div class="release-icon-wrap">
|
|
<font-awesome-icon icon="file-pdf" class="release-icon" />
|
|
</div>
|
|
<h2 class="release-heading">Rechnung bereit</h2>
|
|
<p class="release-sub">Prüfe die Vorschau rechts und lade die Rechnung anschließend als PDF herunter.</p>
|
|
|
|
<div class="release-summary">
|
|
<div class="release-row">
|
|
<span class="release-key">Empfänger</span>
|
|
<span class="release-val">
|
|
{{ [form.organisation, [form.anrede, form.vorname, form.nachname].filter(Boolean).join(' ')].filter(Boolean).join(' · ') || '—' }}
|
|
</span>
|
|
</div>
|
|
<div class="release-row">
|
|
<span class="release-key">Rechnungs-Nr.</span>
|
|
<span class="release-val">{{ form.rechnungsnummer || '(wird automatisch vergeben)' }}</span>
|
|
</div>
|
|
<div class="release-row">
|
|
<span class="release-key">Datum</span>
|
|
<span class="release-val">{{ form.rechnungsdatum || '—' }}</span>
|
|
</div>
|
|
<div class="release-row">
|
|
<span class="release-key">Zahlungsziel</span>
|
|
<span class="release-val">{{ form.zahlungsziel || '—' }}</span>
|
|
</div>
|
|
<div class="release-row release-row--total">
|
|
<span class="release-key">Gesamtbetrag</span>
|
|
<span class="release-val release-val--total">{{ formatPreis(brutto) }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn-download" :disabled="pdfLoading" @click="openPdf">
|
|
<font-awesome-icon :icon="pdfLoading ? 'file-invoice' : 'download'" />
|
|
{{ pdfLoading ? 'PDF wird generiert…' : 'PDF herunterladen' }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- ── Vorschau-Panel (immer sichtbar) ── -->
|
|
<div class="card preview-card">
|
|
<div class="preview-header">
|
|
<span class="preview-title">Vorschau</span>
|
|
</div>
|
|
|
|
<div class="invoice-wrap">
|
|
<div class="invoice-doc">
|
|
|
|
<div class="inv-top">
|
|
<div></div>
|
|
<div class="inv-sender">
|
|
<svg viewBox="0 0 100 100" width="32" height="32">
|
|
<circle cx="50" cy="50" r="49" fill="#f5c400"/>
|
|
<circle cx="50" cy="50" r="38" fill="#1a4799"/>
|
|
<path d="M50,44 C47,36 44,24 47,16 C48.5,12 51.5,12 53,16 C56,24 53,36 50,44Z" fill="white"/>
|
|
<path d="M49,44 C45,41 38,37 30,32 C25,28 25,22 29,20 C33,18 38,23 43,32 C46,37 48,41 49,44Z" fill="white"/>
|
|
<path d="M51,44 C55,41 62,37 70,32 C75,28 75,22 71,20 C67,18 62,23 57,32 C54,37 52,41 51,44Z" fill="white"/>
|
|
<ellipse cx="50" cy="47" rx="8.5" ry="3.5" fill="white"/>
|
|
<rect x="48" y="50" width="4" height="13" rx="1.5" fill="white"/>
|
|
<rect x="41" y="62" width="18" height="4" rx="2" fill="white"/>
|
|
</svg>
|
|
<div class="inv-sender-text">
|
|
<strong>BdP Landesverband Sachsen</strong>
|
|
<span>c/o Mandy Grazek</span>
|
|
<span>Weststraße 53c, 09212 Limbach-Oberfrohna</span>
|
|
<span class="inv-muted">sachsen@pfadfinden.de</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="inv-address-row">
|
|
<div class="inv-recipient">
|
|
<div class="inv-recipient-label">Rechnungsempfänger</div>
|
|
<div v-if="form.organisation">{{ form.organisation }}</div>
|
|
<div>{{ [form.anrede, form.vorname, form.nachname].filter(Boolean).join(' ') || '—' }}</div>
|
|
<div>{{ form.adresse || '—' }}</div>
|
|
<div>{{ [form.plz, form.ort].filter(Boolean).join(' ') || '—' }}</div>
|
|
</div>
|
|
<div class="inv-meta">
|
|
<div class="inv-rechnung-title">RECHNUNG</div>
|
|
<div class="inv-meta-row">
|
|
<span class="inv-meta-key">Rechnungs-Nr.</span>
|
|
<span>{{ form.rechnungsnummer || '—' }}</span>
|
|
</div>
|
|
<div class="inv-meta-row">
|
|
<span class="inv-meta-key">Datum</span>
|
|
<span>{{ form.rechnungsdatum || '—' }}</span>
|
|
</div>
|
|
<div class="inv-meta-row">
|
|
<span class="inv-meta-key">Zahlungsziel</span>
|
|
<span>{{ form.zahlungsziel || '—' }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="inv-hr" />
|
|
|
|
<table class="inv-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Nr.</th>
|
|
<th>Bezeichnung</th>
|
|
<th class="ta-r">Menge</th>
|
|
<th class="ta-r">Einzelpreis</th>
|
|
<th class="ta-r">Gesamt</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<template v-if="habenPositionen">
|
|
<tr v-for="(pos, i) in form.positionen.filter(p => p.bezeichnung)" :key="i">
|
|
<td>{{ i + 1 }}</td>
|
|
<td>{{ pos.bezeichnung }}</td>
|
|
<td class="ta-r">{{ pos.menge }} {{ pos.einheit }}</td>
|
|
<td class="ta-r">{{ formatPreis(pos.einzelpreis) }}</td>
|
|
<td class="ta-r">{{ formatPreis(posGesamt(pos)) }}</td>
|
|
</tr>
|
|
</template>
|
|
<tr v-else>
|
|
<td colspan="5" class="inv-empty">
|
|
Positionen werden in Schritt 2 erfasst.
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="inv-summen">
|
|
<div class="inv-sum-row">
|
|
<span>Nettobetrag</span>
|
|
<span>{{ formatPreis(nettoSumme) }}</span>
|
|
</div>
|
|
<div class="inv-sum-row">
|
|
<span>zzgl. {{ form.mwstSatz }} % MwSt.</span>
|
|
<span>{{ formatPreis(mwstBetrag) }}</span>
|
|
</div>
|
|
<div class="inv-total">
|
|
<span class="inv-total-label">Gesamtbetrag</span>
|
|
<span class="inv-total-value">{{ formatPreis(brutto) }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="inv-bank">
|
|
Bitte überweisen Sie auf IBAN:
|
|
<strong>{{ form.iban || '—' }}</strong>
|
|
<span v-if="form.bic"> · BIC: {{ form.bic }}</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- ── Seitennavigation ── -->
|
|
<div class="page-nav">
|
|
<button v-if="currentStep > 1" class="btn-back" @click="currentStep--">
|
|
<font-awesome-icon icon="chevron-left" />
|
|
Zurück
|
|
</button>
|
|
<div v-else></div>
|
|
|
|
<button v-if="currentStep < 3" class="btn-next" @click="currentStep++">
|
|
{{ currentStep === 1 ? 'Weiter: Positionen' : 'Weiter: Vorschau' }}
|
|
<font-awesome-icon icon="chevron-right" />
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* ── Layout ── */
|
|
.page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
/* ── Breadcrumb + Header-Aktionen ── */
|
|
.page-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
}
|
|
|
|
.breadcrumb {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 0.85rem;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.bc-link { color: #1d4899; text-decoration: none; }
|
|
.bc-link:hover { text-decoration: underline; }
|
|
.bc-sep { font-size: 0.7rem; color: #9ca3af; }
|
|
.bc-current { color: #374151; font-weight: 500; }
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.btn-cancel {
|
|
font-size: 0.875rem;
|
|
color: #6b7280;
|
|
text-decoration: none;
|
|
padding: 7px 14px;
|
|
border-radius: 7px;
|
|
transition: background 0.15s;
|
|
}
|
|
.btn-cancel:hover { background: #f3f4f6; }
|
|
|
|
/* ── Stepper ── */
|
|
.stepper {
|
|
display: flex;
|
|
align-items: center;
|
|
background: white;
|
|
border-radius: 10px;
|
|
padding: 16px 24px;
|
|
box-shadow: 0 1px 4px rgba(0,0,0,0.07);
|
|
}
|
|
|
|
.step { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
|
|
|
|
.step-circle {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.85rem;
|
|
font-weight: 700;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.step--active .step-circle,
|
|
.step--done .step-circle { background: #27ae60; color: white; }
|
|
.step--future .step-circle { background: #f3f4f6; color: #9ca3af; border: 2px solid #e5e7eb; }
|
|
|
|
.step-label { font-size: 0.875rem; font-weight: 500; }
|
|
.step--active .step-label { color: #111827; font-weight: 600; }
|
|
.step--done .step-label { color: #374151; }
|
|
.step--future .step-label { color: #9ca3af; }
|
|
|
|
.step-connector { flex: 1; height: 2px; background: #e5e7eb; margin: 0 16px; }
|
|
|
|
/* ── Seitentitel ── */
|
|
.page-title { display: flex; align-items: center; gap: 14px; }
|
|
|
|
.title-icon {
|
|
width: 44px;
|
|
height: 44px;
|
|
background: #dcfce7;
|
|
color: #16a34a;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.2rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.title-text { margin: 0 0 3px; font-size: 1.25rem; font-weight: 700; color: #111827; }
|
|
.title-sub { margin: 0; font-size: 0.85rem; color: #6b7280; }
|
|
|
|
/* ── Hauptgitter ── */
|
|
.main-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
align-items: start;
|
|
}
|
|
|
|
/* ── Karte ── */
|
|
.card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 1px 4px rgba(0,0,0,0.07);
|
|
padding: 24px;
|
|
border: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.card-heading { margin: 0 0 18px; font-size: 1rem; font-weight: 700; color: #111827; }
|
|
|
|
/* ── Kontaktsuche ── */
|
|
.search-row { display: flex; gap: 10px; align-items: center; }
|
|
.search-wrap { flex: 1; position: relative; }
|
|
.search-icon {
|
|
position: absolute;
|
|
left: 11px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #9ca3af;
|
|
font-size: 0.82rem;
|
|
}
|
|
.search-input { padding-left: 32px !important; }
|
|
|
|
.btn-outline {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 8px 14px;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 7px;
|
|
background: white;
|
|
font-size: 0.82rem;
|
|
font-weight: 500;
|
|
color: #374151;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
transition: background 0.15s, border-color 0.15s;
|
|
}
|
|
.btn-outline:hover { background: #f9fafb; border-color: #9ca3af; }
|
|
|
|
/* ── Trennlinie ── */
|
|
.divider { height: 1px; background: #f0f0f0; margin: 16px 0; }
|
|
|
|
/* ── Formularfelder (Schritt 1) ── */
|
|
.fields { display: flex; flex-direction: column; gap: 12px; }
|
|
.field { display: flex; flex-direction: column; gap: 5px; }
|
|
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
|
.field--plz { max-width: 120px; }
|
|
|
|
.label { font-size: 0.8rem; font-weight: 600; color: #374151; }
|
|
|
|
.input {
|
|
padding: 8px 11px;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 7px;
|
|
font-size: 0.875rem;
|
|
color: #111827;
|
|
background: white;
|
|
outline: none;
|
|
transition: border-color 0.15s;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
font-family: inherit;
|
|
}
|
|
.input:focus { border-color: #1d4899; box-shadow: 0 0 0 3px rgba(29,72,153,0.08); }
|
|
select.input { cursor: pointer; }
|
|
|
|
/* ── DSGVO ── */
|
|
.dsgvo-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
margin-top: 16px;
|
|
cursor: pointer;
|
|
}
|
|
.checkbox { margin-top: 2px; flex-shrink: 0; cursor: pointer; accent-color: #1d4899; }
|
|
.dsgvo-row span { font-size: 0.78rem; color: #6b7280; line-height: 1.5; }
|
|
|
|
/* ── Positionen-Tabelle (Schritt 2) ── */
|
|
.pos-table-wrap {
|
|
overflow-x: auto;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.pos-edit-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.pos-edit-table th {
|
|
text-align: left;
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
color: #6b7280;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
padding: 0 6px 8px;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.pos-edit-table td {
|
|
padding: 5px 4px;
|
|
vertical-align: middle;
|
|
border-bottom: 1px solid #f3f4f6;
|
|
}
|
|
|
|
.pos-edit-table tbody tr:last-child td { border-bottom: none; }
|
|
.pos-edit-table tbody tr:hover td { background: #fafafa; }
|
|
|
|
.col-nr { width: 34px; }
|
|
.col-bez { width: auto; }
|
|
.col-menge { width: 64px; }
|
|
.col-einheit { width: 90px; }
|
|
.col-preis { width: 110px; }
|
|
.col-gesamt { width: 82px; }
|
|
.col-del { width: 34px; }
|
|
|
|
.td-nr { color: #9ca3af; font-size: 0.75rem; text-align: center; }
|
|
.td-gesamt { text-align: right; color: #374151; font-variant-numeric: tabular-nums; white-space: nowrap; }
|
|
|
|
.pos-input {
|
|
padding: 6px 8px;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 6px;
|
|
font-size: 0.82rem;
|
|
color: #111827;
|
|
background: white;
|
|
outline: none;
|
|
transition: border-color 0.15s;
|
|
font-family: inherit;
|
|
box-sizing: border-box;
|
|
}
|
|
.pos-input:focus { border-color: #1d4899; box-shadow: 0 0 0 2px rgba(29,72,153,0.08); }
|
|
|
|
.pos-input--wide { width: 100%; }
|
|
.pos-input--num { width: 100%; text-align: right; }
|
|
.pos-select { width: 100%; cursor: pointer; }
|
|
|
|
.preis-wrap { display: flex; align-items: center; gap: 4px; }
|
|
.preis-suffix { font-size: 0.8rem; color: #6b7280; flex-shrink: 0; }
|
|
|
|
.del-btn {
|
|
width: 28px;
|
|
height: 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 6px;
|
|
background: white;
|
|
color: #9ca3af;
|
|
cursor: pointer;
|
|
font-size: 0.7rem;
|
|
transition: color 0.15s, border-color 0.15s, background 0.15s;
|
|
}
|
|
.del-btn:hover:not(:disabled) { color: #ef4444; border-color: #fca5a5; background: #fef2f2; }
|
|
.del-btn:disabled { opacity: 0.3; cursor: not-allowed; }
|
|
|
|
.add-pos-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 7px 14px;
|
|
border: 1px dashed #d1d5db;
|
|
border-radius: 7px;
|
|
background: transparent;
|
|
color: #6b7280;
|
|
font-size: 0.82rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: color 0.15s, border-color 0.15s;
|
|
margin-bottom: 4px;
|
|
}
|
|
.add-pos-btn:hover { color: #1d4899; border-color: #1d4899; }
|
|
|
|
/* ── MwSt + Summen (Schritt 2) ── */
|
|
.summen-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 24px;
|
|
}
|
|
|
|
.mwst-group { display: flex; flex-direction: column; gap: 8px; }
|
|
.mwst-label { font-size: 0.78rem; font-weight: 600; color: #374151; }
|
|
|
|
.mwst-badges { display: flex; gap: 6px; }
|
|
.mwst-badge {
|
|
padding: 5px 14px;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 20px;
|
|
background: white;
|
|
font-size: 0.82rem;
|
|
font-weight: 500;
|
|
color: #6b7280;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
.mwst-badge:hover { border-color: #1d4899; color: #1d4899; }
|
|
.mwst-badge--active { background: #1d4899; border-color: #1d4899; color: white; }
|
|
|
|
.summen-table { font-size: 0.85rem; border-collapse: collapse; }
|
|
.summen-table td { padding: 3px 0 3px 20px; }
|
|
.sum-key { color: #6b7280; }
|
|
.sum-val { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
|
|
.sum-total-row td {
|
|
border-top: 1.5px solid #1d4899;
|
|
padding-top: 8px;
|
|
font-weight: 700;
|
|
color: #111827;
|
|
}
|
|
.sum-val--total { color: #1d4899; font-size: 1rem; }
|
|
|
|
/* ── Freigabe-Karte (Schritt 3) ── */
|
|
.release-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
}
|
|
|
|
.release-icon-wrap {
|
|
width: 52px;
|
|
height: 52px;
|
|
border-radius: 14px;
|
|
background: #eff6ff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.release-icon { font-size: 1.4rem; color: #1d4899; }
|
|
|
|
.release-heading { margin: 0 0 6px; font-size: 1.1rem; font-weight: 700; color: #111827; }
|
|
.release-sub { margin: 0 0 24px; font-size: 0.83rem; color: #6b7280; line-height: 1.5; }
|
|
|
|
.release-summary {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
border: 1px solid #f0f0f0;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.release-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 14px;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
font-size: 0.85rem;
|
|
}
|
|
.release-row:last-child { border-bottom: none; }
|
|
.release-row--total { background: #f8faff; }
|
|
|
|
.release-key { color: #6b7280; font-weight: 500; }
|
|
.release-val { color: #111827; text-align: right; }
|
|
.release-val--total { font-size: 1.1rem; font-weight: 700; color: #1d4899; }
|
|
|
|
.btn-download {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 9px;
|
|
width: 100%;
|
|
padding: 12px;
|
|
background: #1d4899;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 9px;
|
|
font-size: 0.95rem;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
transition: background 0.15s;
|
|
}
|
|
.btn-download:hover:not(:disabled) { background: #163a7a; }
|
|
.btn-download:disabled { opacity: 0.6; cursor: not-allowed; }
|
|
|
|
/* ── Vorschau-Panel ── */
|
|
.preview-card { padding: 0; overflow: hidden; }
|
|
|
|
.preview-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.preview-title { font-size: 0.9rem; font-weight: 700; color: #111827; }
|
|
|
|
.invoice-wrap { padding: 16px; background: #f5f6fa; min-height: 420px; }
|
|
|
|
.invoice-doc {
|
|
background: white;
|
|
border-radius: 6px;
|
|
padding: 20px;
|
|
font-size: 0.72rem;
|
|
color: #111827;
|
|
box-shadow: 0 1px 6px rgba(0,0,0,0.08);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.inv-top { display: flex; justify-content: flex-end; margin-bottom: 20px; }
|
|
|
|
.inv-sender { display: flex; gap: 10px; align-items: flex-start; text-align: right; }
|
|
|
|
.inv-sender-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 0.68rem;
|
|
color: #374151;
|
|
text-align: right;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.inv-muted { color: #9ca3af; }
|
|
|
|
.inv-address-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.inv-recipient { font-size: 0.7rem; line-height: 1.7; color: #374151; }
|
|
|
|
.inv-recipient-label {
|
|
font-size: 0.6rem;
|
|
color: #9ca3af;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.inv-meta { text-align: right; flex-shrink: 0; }
|
|
|
|
.inv-rechnung-title {
|
|
font-size: 1rem;
|
|
font-weight: 800;
|
|
color: #1d4899;
|
|
letter-spacing: 0.08em;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.inv-meta-row {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
font-size: 0.68rem;
|
|
color: #374151;
|
|
}
|
|
|
|
.inv-meta-key { color: #9ca3af; }
|
|
|
|
.inv-hr { border: none; border-top: 1px solid #e5e7eb; margin: 12px 0; }
|
|
|
|
.inv-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.68rem;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.inv-table th {
|
|
text-align: left;
|
|
font-weight: 600;
|
|
color: #6b7280;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
padding: 5px 6px;
|
|
font-size: 0.62rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.inv-table td { padding: 5px 6px; color: #374151; border-bottom: 1px solid #f3f4f6; }
|
|
.inv-table tr:last-child td { border-bottom: none; }
|
|
.ta-r { text-align: right; }
|
|
|
|
.inv-empty {
|
|
text-align: center;
|
|
color: #9ca3af !important;
|
|
font-style: italic;
|
|
padding: 14px 0 !important;
|
|
}
|
|
|
|
/* ── Summen in Vorschau ── */
|
|
.inv-summen {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: 3px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.inv-sum-row {
|
|
display: flex;
|
|
gap: 24px;
|
|
font-size: 0.66rem;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.inv-sum-row span:last-child { min-width: 60px; text-align: right; font-variant-numeric: tabular-nums; }
|
|
|
|
.inv-total {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24px;
|
|
padding-top: 6px;
|
|
border-top: 1.5px solid #1d4899;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.inv-total-label { font-weight: 600; font-size: 0.72rem; color: #374151; }
|
|
.inv-total-value { font-weight: 800; font-size: 0.88rem; color: #1d4899; font-variant-numeric: tabular-nums; }
|
|
|
|
.inv-bank {
|
|
font-size: 0.62rem;
|
|
color: #9ca3af;
|
|
border-top: 1px solid #f0f0f0;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
/* ── Seitennavigation ── */
|
|
.page-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.btn-back {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: white;
|
|
color: #374151;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
padding: 10px 20px;
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background 0.15s, border-color 0.15s;
|
|
}
|
|
.btn-back:hover { background: #f9fafb; border-color: #d1d5db; }
|
|
|
|
.btn-next {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: #1d4899;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
padding: 10px 22px;
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background 0.15s;
|
|
}
|
|
.btn-next:hover { background: #163a7a; }
|
|
|
|
/* ── Responsive ── */
|
|
@media (max-width: 1024px) {
|
|
.main-grid { grid-template-columns: 1fr; }
|
|
.preview-card { display: none; }
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.field-row { grid-template-columns: 1fr; }
|
|
.field--plz { max-width: none; }
|
|
.stepper { flex-wrap: wrap; gap: 8px; }
|
|
.step-connector { display: none; }
|
|
.summen-row { flex-direction: column; }
|
|
}
|
|
</style>
|