/* Rechnungs-App Pension Budenheim. Corporate Design: Nachtblau und Messing, Titel in Baskerville, Text in Avenir Next.
   Nur Mittel, die Safari 13 kann: Abstände in Flexbox über margin, Raster mit grid-gap, Fokus über :focus. */
:root {
  --nacht: #1C2A43; --nacht-hell: #2B3F63; --nacht-hauch: #EDF0F5;
  --messing: #A8864E; --messing-tief: #6F5427; --messing-hauch: #F7F1E5;
  --text: #1E2230; --leise: #5D6577; --linie: #D9DDE4; --rand: #8B94A5; --flaeche: #F4F5F8;
  --warnung: #B3261E; --warnung-hauch: #FBEEEC; --gut: #1D6746; --gut-hauch: #E8F3EC;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: var(--text);
  font: 17px/1.5 "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; caret-color: var(--nacht);
}
::selection { background: #E8DCC3; color: var(--text); }
a { color: var(--nacht); text-decoration: underline; text-decoration-color: var(--messing); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
a:focus, button:focus, input:focus, select:focus, textarea:focus, summary:focus {
  outline: 3px solid var(--messing); outline-offset: 2px;
}
h1, h2, h3 { color: var(--nacht); margin: 0; }
h1 { font: 400 34px/1.15 Baskerville, "Libre Baskerville", Georgia, serif; margin-bottom: 20px; }
h2 { font-size: 20px; font-weight: 600; line-height: 1.3; margin: 44px 0 14px; }
h3 { font-size: 17px; font-weight: 600; margin: 28px 0 10px; }
p { margin: 0 0 14px; max-width: 68ch; }
.leise { color: var(--leise); }
.klein { font-size: 15px; }
.zahl { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.versteckt { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Probeband und Kopf */
.probeband {
  background: var(--messing-hauch); color: var(--messing-tief); border-bottom: 1px solid #E5D8BD;
  padding: 8px 20px; font-size: 15px; text-align: center;
}
.kopf { border-bottom: 1px solid var(--linie); background: #fff; }
.kopf-innen { max-width: 1080px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; flex-wrap: wrap; }
.kopf-logo { display: block; margin-right: 36px; line-height: 0; }
.kopf-logo img { display: block; height: 46px; width: auto; }
.kopf-nav { display: flex; flex-wrap: wrap; flex: 1 1 auto; }
.kopf-nav a {
  margin-right: 6px; padding: 10px 12px; border-radius: 8px; text-decoration: none; font-weight: 500; color: var(--text);
  transition: background-color 160ms ease-out;
}
.kopf-nav a:hover { background: var(--flaeche); }
.kopf-nav a[aria-current] { color: var(--nacht); font-weight: 600; box-shadow: inset 0 -2px 0 var(--messing); border-radius: 8px 8px 0 0; }
.kopf-ab { display: flex; align-items: center; margin-left: auto; }
.kopf-name { color: var(--leise); font-size: 15px; margin-right: 8px; }

/* ---- Inhalt */
.inhalt { max-width: 1080px; margin: 0 auto; padding: 36px 20px 80px; }
.inhalt-schmal { max-width: 500px; }
.inhalt-mittel { max-width: 760px; }
.titelzeile { display: flex; align-items: flex-end; flex-wrap: wrap; margin-bottom: 24px; }
.titelzeile h1 { margin: 0 24px 0 0; flex: 1 1 auto; }
.titelzeile .knopf { margin-top: 12px; }
.zurueck { display: inline-block; margin-bottom: 14px; font-size: 15px; }

/* ---- Hinweise */
.hinweis { border-radius: 8px; padding: 12px 16px; margin: 0 0 22px; max-width: none; }
.hinweis-ok { background: var(--gut-hauch); color: #134A32; }
.hinweis-fehler { background: var(--warnung-hauch); color: #7E1A14; font-weight: 500; }
.hinweis-info { background: var(--nacht-hauch); color: var(--nacht); }
.hinweis-probe { background: var(--messing-hauch); color: var(--messing-tief); }

/* ---- Knöpfe */
.knopf {
  display: inline-block; min-height: 48px; padding: 11px 20px; border: 1px solid var(--nacht); border-radius: 8px;
  background: #fff; color: var(--nacht); font: inherit; font-weight: 600; line-height: 24px; text-align: center;
  text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}
.knopf:hover { background: var(--nacht-hauch); }
.knopf:active { background: #DDE2EB; }
.knopf-haupt { background: var(--nacht); color: #fff; }
.knopf-haupt:hover { background: var(--nacht-hell); border-color: var(--nacht-hell); }
.knopf-haupt:active { background: #121C2E; }
.knopf-leise { border-color: transparent; background: transparent; font-weight: 500; padding-left: 12px; padding-right: 12px; }
.knopf-leise:hover { background: var(--flaeche); }
.knopf-gefahr { border-color: var(--warnung); color: var(--warnung); }
.knopf-gefahr:hover { background: var(--warnung-hauch); }
.knopf-breit { display: block; width: 100%; }
.knopf-gross { min-height: 56px; padding: 15px 28px; font-size: 18px; }
.knopfzeile { display: flex; flex-wrap: wrap; align-items: center; margin: 28px -6px 0; }
.knopfzeile > * { margin: 6px; }

/* ---- Formulare */
.formular { max-width: 640px; }
.karte { border: 1px solid var(--linie); border-radius: 12px; padding: 24px; margin-bottom: 20px; }
.feld { margin-bottom: 20px; }
.feld label, .feld .feld-titel { display: block; font-weight: 600; margin-bottom: 6px; }
.feld-hilfe { color: var(--leise); font-size: 15px; margin: 6px 0 0; }
.anhang { margin: 0 0 20px; padding: 12px 14px; border: 1px solid var(--linie); border-radius: 6px; background: #fff; }
input[type="text"], input[type="password"], input[type="email"], select, textarea {
  display: block; width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--rand); border-radius: 8px;
  background: #fff; color: var(--text); font: inherit; -webkit-appearance: none; appearance: none;
  transition: border-color 160ms ease-out;
}
input:hover, select:hover, textarea:hover { border-color: var(--nacht); }
input::placeholder, textarea::placeholder { color: #6B7385; opacity: 1; }
textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
select {
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231C2A43' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}
.reihe { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0 16px; }
.reihe-3 { grid-template-columns: 1.4fr 1fr 1fr; }
.feld-kurz input { max-width: 220px; }
.wahl { display: flex; flex-direction: column; }
.wahl label { display: flex; align-items: center; font-weight: 500; margin: 0; min-height: 40px; cursor: pointer; }
input[type="radio"], input[type="checkbox"] { width: 22px; height: 22px; margin: 0 10px 0 0; accent-color: var(--nacht); flex: none; }
.haken { display: flex; align-items: flex-start; font-weight: 600; cursor: pointer; margin: 0 0 18px; }
.haken input { margin-top: 2px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; font-weight: 600; margin-bottom: 6px; }
.abschnitt { border-top: 1px solid var(--linie); margin-top: 32px; padding-top: 8px; }
.abschnitt:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.abschnitt h2 { margin-top: 20px; }
details.zusatz { border-top: 1px solid var(--linie); margin-top: 32px; padding-top: 18px; }
details.zusatz summary { cursor: pointer; font-weight: 600; color: var(--nacht); font-size: 20px; padding: 6px 0; }
details.zusatz .zusatz-zeile { border-bottom: 1px solid var(--linie); padding: 18px 0 0; }
details.zusatz .zusatz-zeile:last-child { border-bottom: 0; }

/* ---- Jahresleiste und Kennzahlen */
.jahreswahl { display: flex; flex-wrap: wrap; margin: 0 0 18px; }
.jahreswahl a { margin-right: 6px; padding: 6px 14px; border-radius: 999px; text-decoration: none; color: var(--text); border: 1px solid transparent; }
.jahreswahl a:hover { border-color: var(--linie); }
.jahreswahl a[aria-current] { background: var(--nacht); color: #fff; font-weight: 600; }
.leiste { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--nacht); border-bottom: 1px solid var(--linie); margin: 0 0 8px; }
.leiste div { padding: 16px 20px 18px 0; }
.leiste dt { color: var(--leise); font-size: 15px; }
.leiste dd { margin: 2px 0 0; font-size: 26px; font-weight: 600; color: var(--nacht); font-variant-numeric: tabular-nums; white-space: nowrap; }
.leiste .leiste-neben dd { font-weight: 500; color: var(--text); }
.leiste .leiste-offen dd { color: var(--messing-tief); }

/* ---- Tabellen */
.tabelle-huelle { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -20px; padding: 0 20px; }
table { width: 100%; border-collapse: collapse; font-size: 16px; }
th { text-align: left; font-weight: 600; color: var(--nacht); font-size: 15px; padding: 10px 14px 8px 0; border-bottom: 2px solid var(--nacht); white-space: nowrap; }
td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
th:last-child, td:last-child { padding-right: 0; }
th.zahl { text-align: right; }
tbody tr:hover td { background: #FAFBFC; }
tfoot td { border-bottom: 0; border-top: 2px solid var(--nacht); font-weight: 600; color: var(--nacht); }
td .nr { font-weight: 600; white-space: nowrap; }
tr.leer td { color: #8A92A2; }
.status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.status-Entwurf { background: var(--flaeche); color: var(--leise); }
.status-offen { background: var(--messing-hauch); color: var(--messing-tief); }
.status-bezahlt { background: var(--gut-hauch); color: var(--gut); }
.status-storniert, .status-Storno { background: var(--warnung-hauch); color: #8B1E17; }
.status-Altbestand { background: #fff; color: var(--leise); box-shadow: inset 0 0 0 1px var(--linie); }
.leerstand { border: 1px dashed var(--rand); border-radius: 12px; padding: 28px 24px; color: var(--leise); }
.filter { display: flex; flex-wrap: wrap; align-items: flex-end; margin: 0 -8px 20px; }
.filter .feld { margin: 0 8px 12px; min-width: 150px; flex: 1 1 150px; max-width: 260px; }
.filter .knopf { margin: 0 8px 12px; }

/* ---- Vorschau und Rechnung */
.zwei { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-gap: 36px; align-items: start; }
.pdf-rahmen { width: 100%; height: 760px; border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche); display: block; }
.daten { margin: 0 0 20px; }
.daten div { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--linie); }
.daten dt { color: var(--leise); margin-right: 16px; }
.daten dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.daten .gesamt { border-bottom: 0; border-top: 2px solid var(--nacht); margin-top: -1px; }
.daten .gesamt dt, .daten .gesamt dd { color: var(--nacht); font-weight: 600; font-size: 20px; }
.kasten { background: var(--flaeche); border-radius: 12px; padding: 22px 24px; margin-bottom: 20px; }
.kasten h2, .kasten h3 { margin-top: 0; }
.kasten .knopf { margin-bottom: 10px; }
.kasten form:last-child .knopf, .kasten > .knopf:last-child { margin-bottom: 0; }
.nummer { font: 400 34px/1.1 Baskerville, "Libre Baskerville", Georgia, serif; color: var(--nacht); margin: 0 14px 0 0; }
.kopfzeile { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.verlauf { list-style: none; margin: 0; padding: 0; }
.verlauf li { padding: 10px 0; border-bottom: 1px solid var(--linie); font-size: 16px; }
.verlauf li:last-child { border-bottom: 0; }
.link-anzeige { display: block; width: 100%; padding: 12px 14px; border: 1px solid var(--rand); border-radius: 8px; background: #fff; font: 15px/1.4 Menlo, Consolas, monospace; word-break: break-all; }

@media (max-width: 820px) {
  h1 { font-size: 28px; }
  .inhalt { padding-top: 26px; }
  .zwei { grid-template-columns: minmax(0, 1fr); grid-gap: 24px; }
  .zwei .seite-zuerst { order: -1; }
  .pdf-rahmen { height: 520px; }
  .leiste { grid-template-columns: 1fr 1fr; }
  .leiste dd { font-size: 22px; }
  .kopf-logo { margin-right: auto; }
  .kopf-nav { order: 3; flex: 1 1 100%; margin: 8px -10px 0; }
  .kopf-nav a { margin-right: 2px; padding: 8px 10px; white-space: nowrap; }
  .kopf-name { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .reihe, .reihe-3 { grid-template-columns: minmax(0, 1fr); }
  .knopfzeile .knopf { flex: 1 1 100%; }
  .titelzeile .knopf { width: 100%; }
  table { font-size: 15px; }
  th, td { padding-right: 10px; }
  .status { padding: 2px 8px; font-size: 13px; }
  .schmal-weg { display: none; }
  .kopf-logo img { height: 34px; }
}
@media print {
  .kopf, .probeband, .knopfzeile, .filter { display: none; }
}