/* NhPanel – Gutschein-Seiten: Einlöseseite (views/gutschein/einloesen.twig, ergänzt dedicated.css) sowie die schlichten
   Dokumente Druck- und Teilen-Ansicht (.gpg). Farben aus den Tokens von dedicated.css (--d-*), sonst neutrale Grautöne. */

/* ---------- Einlöseseite: Formular in der Box rechts im Kopf */
.gr-box { padding: 20px 22px; display: grid; gap: 16px; }
.gr-form { display: grid; gap: 8px; }
.gr-form .nhd-btn { justify-self: start; margin-top: 6px; }
.gr-label { font-weight: 600; font-size: 14px; color: var(--d-ink, #0b1020); }
.gr-input { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #c5ccdb; border-radius: 8px; background: #fff; color: var(--d-ink, #0b1020); font-size: 16px; }
.gr-input:focus { outline: none; border-color: var(--d-accent, #4f46e5); box-shadow: 0 0 0 3px rgba(79, 70, 229, .18); }
.gr-input[aria-invalid="true"] { border-color: #b42318; }
.gr-code { font-family: var(--d-mono, ui-monospace, Menlo, Consolas, monospace); text-transform: uppercase; letter-spacing: .06em; }
.gr-muted { margin: 0; color: var(--d-muted, #5a6478); font-size: 13.5px; line-height: 1.5; }
.gr-error { margin: 0; color: #b42318; font-size: 14px; line-height: 1.5; }
.gr-result, .gr-child { display: grid; gap: 10px; border-top: 1px solid var(--d-line, #dde2ec); padding-top: 14px; }
.gr-box > .gr-child:first-child { border-top: 0; padding-top: 0; }
.gr-result p, .gr-child p { margin: 0; line-height: 1.55; }
.gr-what { font-weight: 700; font-size: 17px; color: var(--d-ink, #0b1020); overflow-wrap: break-word; }
.gr-h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.gr-h3 { margin: 6px 0 0; font-size: 14px; font-weight: 600; }
.gr-rest { font-variant-numeric: tabular-nums; font-weight: 600; }
.gr-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gr-servers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gr-servers li { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--d-line, #dde2ec); border-radius: 8px; }
.gr-server-name { font-weight: 600; overflow-wrap: break-word; }
.gr-inline { margin: 4px 0 0; }
.gr-inline .nhd-btn { min-height: 40px; padding: 8px 12px; font-size: 14px; }
.gr-form--child { border-top: 1px solid var(--d-line, #dde2ec); padding-top: 12px; }

/* Dunkelmodus (Shop): die Box bleibt lesbar */
html.nh-dark .gr-input { background: #0f1729; color: #e8ecf5; border-color: #33405c; }
html.nh-dark .gr-error { color: #ff8a80; }

/* ---------- Druck- und Teilen-Ansicht (eigene Dokumente) */
.gpg { margin: 0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; color: #0b1020; background: #f6f7fb; }
.gpg-main { max-width: 720px; margin: 0 auto; padding: 16px 16px 48px; display: grid; gap: 18px; }
.gpg-title { margin: 8px 0 0; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.2; }
.gpg-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; max-width: 720px; margin: 0 auto; padding: 16px 16px 0; }
.gpg-bar--center { justify-content: center; padding: 0; }
.gpg-hint { max-width: 720px; margin: 8px auto 0; padding: 0 16px; color: #5a6478; font-size: 13.5px; line-height: 1.5; text-align: center; }
.gpg-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid #c5ccdb; border-radius: 8px; background: #fff;
    color: #0b1020; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.gpg-btn--primary { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.gpg-btn:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }
/* Ansehen: Karte groß; rechts Drucken / PDF / Bild (schmal: umbrechen, nichts abschneiden) */
.gpg-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gpg-bar--wide, .gpg-main--wide { max-width: 1040px; }
@media print {
    .gpg { background: #fff; }
    .gpg-bar, .gpg-hint, .gpg-title, #nh-live, #nh-cookie-consent, #nh-cookie-blur { display: none !important; }
    .gpg-main { padding: 0; max-width: none; }
}

/* ---------- Kind-Ansicht: schlichter Kopf (nur Logo) und Fuß (Impressum, Datenschutz) statt Shop-Navigation (Abnahme #18) */
.gr-kidbar { border-bottom: 1px solid var(--d-line, #e3e7ef); background: #fff; }
.gr-kidbar__in { display: flex; align-items: center; min-height: 64px; }
.gr-kidbar .gk-logo { display: block; height: 30px; width: auto; --gk-logo-a: #131e3e; --gk-logo-b: #959ca4; }
.gr-kidbar .gk-logo-a { fill: var(--gk-logo-a); }
.gr-kidbar .gk-logo-b { fill: var(--gk-logo-b); }
.gr-kidfoot { border-top: 1px solid var(--d-line, #e3e7ef); padding: 18px 0 22px; font-size: 13.5px; }
.gr-kidfoot__in { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.gr-kidfoot a { color: var(--d-muted, #5a6478); text-decoration: none; }
.gr-kidfoot a:hover, .gr-kidfoot a:focus-visible { text-decoration: underline; }
.gr--kid .nhd-head { padding-bottom: 40px; }
html.nh-dark .gr-kidbar { background: #0b1220; border-bottom-color: #26324a; }
html.nh-dark .gr-kidbar .gk-logo { --gk-logo-a: #ffffff; --gk-logo-b: #aab2bd; }
html.nh-dark .gr-kidfoot { border-top-color: #26324a; }
html.nh-dark .gr-kidfoot a { color: #aab4c8; }