/*
 * Zusätzliches Theme NUR für das öffentliche Auftragsformular (index.php) und die
 * kundenseitige Widerrufs-Bestätigungsseite - wird NACH style.css geladen und überschreibt
 * dort gezielt Farben/Schrift, damit der Adminbereich unverändert bleibt (eigene Datei bewusst
 * getrennt gehalten statt style.css selbst zu ändern).
 *
 * Farbpalette bewusst an die Haupt-Webseite (https://jagdtrophaeen-huber.de/index.php)
 * angeglichen (dort per CSS-Variablen --primary/--title/--bg-dark/... ausgelesen), damit sich
 * Hauptseite und dieses Auftragsformular wie ein zusammengehöriger Auftritt anfühlen: #34dca2
 * (Mintgrün) als Akzent-/Button-Farbe, dunkles Fast-Schwarz für Überschriften/Navigationsleiste,
 * helles Grau/Weiß als Hintergrund. Die Schriftart (Georgia/serif) bleibt bewusst unverändert -
 * hier ging es nur um den Farbton.
 */

:root {
    --primary: #34dca2;
    --primary-dark: #249a71;
    --bg: #fafafa;
    --card: #ffffff;
    --border: #eeeeee;
    --text: #1b1b1d;
    --muted: #616161;
}

body {
    font-family: Georgia, "Times New Roman", Cambria, serif;
    background: var(--bg);
}

h1, h2, h3 {
    font-family: Georgia, "Times New Roman", Cambria, serif;
    color: var(--text);
}

a { color: var(--primary-dark); }

.topbar { background: #1b1b1d; }
.topbar .brand img { background: #ffffff; }

.hero {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: flex-end;
    background:
        linear-gradient(180deg, rgba(20, 14, 8, .15) 0%, rgba(20, 14, 8, .35) 55%, rgba(15, 10, 6, .88) 100%),
        url("img/hero-werkstatt.jpg") center 32% / cover no-repeat;
}
.hero-inner { max-width: 1100px; margin: 0 auto; padding: 36px 20px 28px; width: 100%; }
.hero h1 {
    color: #f7efdd;
    margin: 0 0 8px;
    font-size: 30px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}
.hero p {
    color: #e2d6b8;
    margin: 0;
    max-width: 580px;
    font-size: 14.5px;
    line-height: 1.5;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}
@media (max-width: 640px) {
    .hero { min-height: 240px; }
    .hero h1 { font-size: 24px; }
}

.card {
    background: var(--card);
    border-color: var(--border);
}

input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea {
    background: #ffffff;
    border-color: var(--border);
    color: var(--text);
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

label { color: var(--primary-dark); }

th { color: var(--muted); }
tr:hover td { background: #f0faf6; }

.btn { background: var(--primary); }
.btn:hover { background: var(--primary-dark); }
.btn.secondary { background: #ffffff; color: var(--text); border-color: var(--border); }
.btn.secondary:hover { background: #f5f8f8; }

.notice-box { background: #eafaf4; border-color: #b8ecd9; color: var(--text); }
.muted { color: var(--muted); }
.help { color: var(--muted); }

/*
 * Leistungen als Karten statt Tabelle: eine Tabelle mit Menge/Express/Zusatzoptionen als
 * eigene Spalten funktioniert auf schmalen Bildschirmen nicht (Spalten werden abgeschnitten).
 * Stattdessen eine Karte je Leistung, Express und Zusatzoptionen als anklickbare "Chips" -
 * bleibt bei jeder Breite übersichtlich und lesbar, ohne horizontales Scrollen.
 */
.leistungen-liste { display: flex; flex-direction: column; gap: 12px; }

.leistung-item {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    background: #ffffff;
    transition: border-color .15s, background .15s;
}
.leistung-item:has(.leistung-check:checked) {
    border-color: var(--primary);
    background: #eafaf4;
}

.leistung-head { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 0; }
.leistung-check { width: 19px; height: 19px; margin-top: 2px; flex-shrink: 0; accent-color: var(--primary); }
.leistung-name { font-weight: 700; font-size: 15.5px; color: var(--text); }
.leistung-preis { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.leistung-menge { display: flex; align-items: center; gap: 10px; margin: 12px 0 12px 29px; }
.leistung-menge label { margin: 0; font-size: 13px; }
.leistung-menge input { width: 80px; }

.leistung-optionen { display: flex; flex-wrap: wrap; gap: 8px; margin-left: 29px; }

.opt-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 7px 14px 7px 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    background: #fff;
    color: var(--text);
    margin: 0;
    transition: background .15s, border-color .15s, color .15s;
}
.opt-chip input { margin: 0; accent-color: var(--primary); }
.opt-chip small { color: var(--muted); font-size: 11.5px; }
.opt-chip:has(input:checked) { background: var(--primary); border-color: var(--primary); color: #fff; }
.opt-chip:has(input:checked) small { color: rgba(255, 255, 255, .85); }

.opt-chip.express-chip { border-color: #c9962f; font-weight: 600; }
.opt-chip.express-chip:has(input:checked) { background: #c9962f; border-color: #c9962f; }
.opt-chip.express-chip:has(input:checked) small { color: #fff3dc; }

@media (max-width: 520px) {
    .leistung-menge, .leistung-optionen { margin-left: 0; }
}

/* Zwischensumme: als klar erkennbare, wiedererkennbare Preisbox vor dem Absenden-Button. */
#summe-card {
    background: #eafaf4;
    border-color: #b8ecd9;
}
.summe-zeile { font-size: 16px; margin: 0 0 4px; }
.summe-zeile strong { color: var(--primary-dark); font-size: 19px; }
#summe-card .help { margin-top: 6px; }

/*
 * Footer: 1:1 an den Fußbereich der Hauptseite (https://jagdtrophaeen-huber.de/index.php#kontakt)
 * angeglichen - Logo (mit "Jagdtrophäen Huber"-Schriftzug, bereits als assets/img/logo.png
 * vorhanden), Copyright-Zeile und Impressum-/Datenschutz-Links, jeweils mit den dort live
 * ausgelesenen Farben/Schriftgrößen (Schriftart "Roboto Condensed", abweichend von der sonst auf
 * dieser Seite verwendeten Georgia-Schrift - bewusst so übernommen, damit Logo/Copyright/Links
 * optisch exakt wie auf der Hauptseite wirken).
 */
.site-footer {
    text-align: center;
    padding: 44px 20px 32px;
}
.footer-logo {
    width: 130px;
    height: 71px;
    margin-bottom: 14px;
}
.site-footer .copyright {
    margin: 0 0 18px;
    color: #616161;
    font-family: "Roboto Condensed", Georgia, "Times New Roman", Cambria, serif;
    font-size: 18px;
    font-weight: 300;
}
.site-footer .footer-links {
    margin: 0;
}
.site-footer .footer-links a {
    color: #000000;
    font-family: "Roboto Condensed", Georgia, "Times New Roman", Cambria, serif;
    font-size: 18px;
    text-decoration: none;
}
.site-footer .footer-links a:hover {
    text-decoration: underline;
}