/* Briefbote – Farben und Schrift */
:root {
    --papier: #eef2f6;
    --weiss: #ffffff;
    --tinte: #1c2b4b;
    --text: #2f3a4f;
    --grau: #5a6578;
    --linie: #cfd8e3;
    --stempel: #c0262d;
    --stempel-dunkel: #9c1d23;
    --gruen: #1f7a4d;
    --gelb: #fff4d6;
    --radius: 6px;
    --breite: 1080px;
}

* { box-sizing: border-box; }

html { font-size: 18px; }

body {
    margin: 0;
    background: var(--papier);
    color: var(--text);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.55;
}

h1, h2, h3 { color: var(--tinte); line-height: 1.2; }
h1 { font-size: 2.1rem; margin: 0 0 .6em; letter-spacing: -0.01em; }
h2 { font-size: 1.45rem; margin: 1.6em 0 .6em; }
h3 { font-size: 1.1rem; margin: 1.2em 0 .4em; }
p { max-width: 68ch; }
a { color: var(--tinte); text-underline-offset: 3px; }
a:hover { color: var(--stempel); }

:focus-visible { outline: 3px solid var(--stempel); outline-offset: 2px; }

.sprung { position: absolute; left: -999px; }
.sprung:focus { left: 1rem; top: 1rem; background: var(--weiss); padding: .5rem 1rem; z-index: 10; }

/* Kopf */
.kopf { background: var(--tinte); color: var(--weiss); }
.kopf-innen {
    max-width: var(--breite); margin: 0 auto; padding: .8rem 1rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.marke {
    color: var(--weiss); text-decoration: none; font-weight: 700; font-size: 1.15rem;
    display: flex; align-items: center; gap: .6rem;
}
.marke svg { width: 34px; height: 24px; fill: none; stroke: var(--weiss); stroke-width: 2; }
.kopf nav { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.kopf nav a, .kopf nav .link { color: #dfe6f0; text-decoration: none; font-size: .95rem; }
.kopf nav a:hover, .kopf nav .link:hover { color: var(--weiss); text-decoration: underline; }
.inline { display: inline; margin: 0; }
.link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

main { max-width: var(--breite); margin: 0 auto; padding: 2rem 1rem 4rem; }

/* Startseite */
.held {
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center;
    padding: 1.5rem 0 2.5rem;
}
.held h1 { font-size: 2.6rem; }
.held .unter { font-size: 1.15rem; color: var(--grau); }

.couvert {
    position: relative; background: var(--weiss); aspect-ratio: 229 / 114;
    border-radius: 4px; box-shadow: 0 18px 40px -18px rgba(28, 43, 75, .45);
    transform: rotate(-2deg);
}
.couvert .fenster {
    position: absolute; left: 55%; top: 38%; width: 40%; height: 40%;
    border: 1.5px solid var(--linie); border-radius: 3px; background: #f7f9fb;
    padding: .55rem .7rem; font-size: .8rem; line-height: 1.35; color: var(--tinte);
}
.couvert .absender {
    position: absolute; left: 6%; top: 10%; font-size: .62rem; color: var(--grau); line-height: 1.3;
}
.marke-stempel {
    position: absolute; right: 5%; top: 9%; width: 17%; aspect-ratio: 4 / 5;
    background: var(--stempel); color: var(--weiss);
    display: grid; place-items: center; text-align: center; font-weight: 700; font-size: .95rem; line-height: 1.1;
    -webkit-mask: radial-gradient(circle 4px at 4px 4px, transparent 98%, #000) -4px -4px / 10px 10px;
            mask: radial-gradient(circle 4px at 4px 4px, transparent 98%, #000) -4px -4px / 10px 10px;
}
.marke-stempel small { display: block; font-weight: 400; font-size: .6rem; }

.knopf {
    display: inline-block; background: var(--stempel); color: var(--weiss); border: 0;
    padding: .8rem 1.4rem; border-radius: var(--radius); font: inherit; font-weight: 600;
    text-decoration: none; cursor: pointer; font-size: 1rem;
}
.knopf:hover { background: var(--stempel-dunkel); color: var(--weiss); }
.knopf.zweit { background: var(--weiss); color: var(--tinte); border: 2px solid var(--tinte); }
.knopf.zweit:hover { background: var(--tinte); color: var(--weiss); }
.knopf.klein { padding: .45rem .9rem; font-size: .9rem; }
.knopf.gefahr { background: var(--weiss); color: var(--stempel); border: 2px solid var(--stempel); }
.knopf.gefahr:hover { background: var(--stempel); color: var(--weiss); }
.knoepfe { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.4rem; }

.schritte { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; counter-reset: s; }
.schritte li { counter-increment: s; border-top: 3px solid var(--tinte); padding-top: .8rem; }
.schritte li::before { content: counter(s); font-size: 2rem; font-weight: 700; color: var(--stempel); display: block; }
.schritte strong { display: block; color: var(--tinte); font-size: 1.1rem; }

.preise { width: 100%; max-width: 640px; border-collapse: collapse; background: var(--weiss); border-radius: var(--radius); overflow: hidden; }
.preise td, .preise th { padding: .75rem 1rem; border-bottom: 1px solid var(--linie); text-align: left; }
.preise td:last-child, .preise th:last-child { text-align: right; white-space: nowrap; font-weight: 600; color: var(--tinte); }
.preise tr:last-child td { border-bottom: 0; }

.vergleich { background: var(--weiss); border-left: 5px solid var(--stempel); padding: 1rem 1.3rem; border-radius: var(--radius); max-width: 640px; margin-bottom: 1.5rem; }
.vergleich h3 { margin-top: 0; }
[hidden] { display: none !important; }
fieldset > p.hilfe { margin: 0; font-size: .85rem; color: var(--grau); }

/* Formulare */
.schmal { max-width: 560px; }
.formular { display: grid; gap: 1rem; }
.formular label { display: grid; gap: .3rem; font-weight: 600; color: var(--tinte); font-size: .95rem; }
.formular input, .formular select, .formular textarea {
    font: inherit; font-weight: 400; font-size: .95rem; line-height: 1.3; padding: .45rem .65rem; border: 1.5px solid var(--linie);
    border-radius: var(--radius); background: var(--weiss); color: var(--text); width: 100%;
}
.formular input:focus, .formular select:focus, .formular textarea:focus { border-color: var(--tinte); outline: none; box-shadow: 0 0 0 3px rgba(28,43,75,.15); }
.formular .hilfe { font-weight: 400; color: var(--grau); font-size: .85rem; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.plzort { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; }
fieldset { border: 1.5px solid var(--linie); border-radius: var(--radius); padding: 1rem 1.2rem 1.1rem; margin: 0; background: var(--weiss); display: grid; gap: .8rem; }
/* Titel innerhalb der weissen Box, nicht auf dem Rahmen */
legend { float: left; width: 100%; padding: 0 0 .5rem; margin: 0; border-bottom: 1px solid var(--linie); font-weight: 700; color: var(--tinte); font-size: 1.05rem; }
.formular input[type="file"] { padding: .35rem .5rem; }
.wahl { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: .6rem !important; font-weight: 400 !important; }
.wahl input { width: auto !important; margin-top: .35rem; }
.check { display: flex !important; gap: .6rem !important; align-items: flex-start; font-weight: 400 !important; }
.check input { width: auto !important; margin-top: .35rem; }

.bestellen { display: grid; grid-template-columns: 1fr 300px; gap: 2rem; align-items: start; }
.summe { position: sticky; top: 1rem; background: var(--tinte); color: var(--weiss); border-radius: var(--radius); padding: 1.3rem; }
.summe h2 { color: var(--weiss); margin-top: 0; font-size: 1.1rem; }
.summe .betrag { font-size: 2rem; font-weight: 700; }
.summe p { font-size: .85rem; color: #cdd6e4; }

/* Hinweise */
.hinweis { padding: .8rem 1rem; border-radius: var(--radius); margin: 0 0 1rem; max-width: none; }
.hinweis.ok { background: #e3f3ea; color: #14532d; }
.hinweis.fehler { background: #fde4e4; color: #7f1d1d; }
.hinweis.info { background: var(--gelb); color: #5c4400; }

/* Tabellen */
.tabelle { width: 100%; border-collapse: collapse; background: var(--weiss); border-radius: var(--radius); overflow: hidden; font-size: .92rem; }
.tabelle th, .tabelle td { padding: .65rem .8rem; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.tabelle th { background: #e4eaf1; color: var(--tinte); font-weight: 600; }
.tabelle-rahmen { overflow-x: auto; }

.status { display: inline-block; padding: .15rem .55rem; border-radius: 99px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.status-neu { background: var(--gelb); color: #5c4400; }
.status-bezahlt { background: #dbe7fb; color: #1e3a8a; }
.status-gedruckt { background: #e9e1fb; color: #4c1d95; }
.status-versendet { background: #e3f3ea; color: #14532d; }
.status-storniert { background: #eceff3; color: #5a6578; }

.karte { background: var(--weiss); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin-bottom: 1.2rem; }
.karte h2 { margin-top: 0; }
.daten { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1.2rem; margin: 0; }
.daten dt { color: var(--grau); }
.daten dd { margin: 0; }
.spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }

.filter { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filter a { padding: .35rem .8rem; border-radius: 99px; background: var(--weiss); text-decoration: none; font-size: .9rem; }
.filter a.aktiv { background: var(--tinte); color: var(--weiss); }

.text h2 { font-size: 1.15rem; }

/* Fuss */
.fuss { background: var(--weiss); border-top: 1px solid var(--linie); }
.fuss-innen { max-width: var(--breite); margin: 0 auto; padding: 1.5rem 1rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .9rem; }
.fuss-innen p a { margin-right: 1rem; }

@media (max-width: 800px) {
    html { font-size: 17px; }
    .held, .bestellen, .spalten { grid-template-columns: 1fr; }
    .held h1 { font-size: 2rem; }
    .schritte { grid-template-columns: 1fr; gap: 1.2rem; }
    .zwei { grid-template-columns: 1fr; }
    .summe { position: static; }
    .couvert .fenster { font-size: .65rem; }
}

@media (prefers-reduced-motion: no-preference) {
    .couvert { animation: ankommen .7s ease-out both; }
    @keyframes ankommen { from { transform: translateY(14px) rotate(-5deg); opacity: 0; } to { transform: rotate(-2deg); opacity: 1; } }
}

@media print {
    .kopf, .fuss, .knoepfe, .filter { display: none; }
    body { background: #fff; }
}
.preise th { background: #e4eaf1; color: var(--tinte); font-weight: 600; }
.preise th + th, .preise td + td { text-align: right; white-space: nowrap; }
.zuschlaege { margin-top: .8rem; }

/* Bilder */
.bild { display: block; width: 100%; height: auto; border-radius: var(--radius); object-fit: cover; }
.bild.breit { max-height: 340px; margin: 0 0 1.5rem; }
.mit-bild { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: center; }
.vergleich.mit-bild { max-width: none; grid-template-columns: 220px 1fr; }
.vergleich.mit-bild .bild { aspect-ratio: 4 / 3; }
@media (max-width: 800px) {
    .mit-bild, .vergleich.mit-bild { grid-template-columns: 1fr; }
}
.preise td + td { font-weight: 600; color: var(--tinte); }
@media (max-width: 800px) { .vergleich.mit-bild .bild { max-height: 180px; } }

/* Ratgeber */
.ratgeber { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; }
.ratgeber strong { color: var(--tinte); }
.ratgeber-seite { max-width: 760px; }
.ratgeber-seite .bild { margin: 1rem 0 1.5rem; max-height: 360px; }
.ratgeber-seite ol, .ratgeber-seite ul { padding-left: 1.3rem; }
.ratgeber-seite li { margin-bottom: .35rem; }
.preis-zeile { background: var(--weiss); border-left: 5px solid var(--stempel); padding: .8rem 1.1rem; border-radius: var(--radius); }
.faq dt { font-weight: 700; color: var(--tinte); margin-top: 1.2rem; }
.faq dd { margin: .3rem 0 0; max-width: 68ch; }
.mehr-links { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }

/* Bezahlen mit TWINT */
.zahlen { padding-left: 1.3rem; margin: 0 0 1rem; }
.zahlen li { margin: 0 0 .7rem; }
.zahlen .gross { font-size: 1.25rem; letter-spacing: .02em; }
.kopier-zeile { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

/* Kontaktformular: Feld für Spam-Roboter verstecken */
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Admin: Besucher */
.zahlen-reihe { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.zahlen-reihe .karte { flex: 1 1 160px; margin: 0; }
.gross-zahl { display: block; font-size: 2rem; font-weight: 700; color: var(--tinte); }
.balken-zelle { width: 40%; }
.balken-zelle meter { width: 100%; height: .8rem; }