/* erstattung.peetz.io – Farbkanon: Silver Mist, Soft Taupe, Linen, Sage, Duck Egg; Akzente Blush, Champagne */
:root {
  --grund: #FBFAF7;
  --flaeche: #FFFFFF;
  --tinte: #33312D;
  --tinte-2: #6A665E;
  --tinte-3: #9A958B;
  --linie: #E9E5DE;

  --silver: #DCDAD5;
  --taupe: #BFB9B1;
  --linen: #D7CDC2;
  --sage: #959D90;
  --duck: #94A3A6;
  --blush: #CFB8AF;
  --champagne: #C1B28E;

  --silver-z: #F1F0EE;
  --taupe-z: #EDEAE6;
  --linen-z: #F4F0EB;
  --sage-z: #E8EBE5;
  --duck-z: #E6EBEC;
  --blush-z: #F4ECE9;
  --champagne-z: #F3EEE2;

  --sage-tief: #5E6759;
  --duck-tief: #56676B;
  --blush-tief: #8A6358;
  --champagne-tief: #7A6A43;

  --serif: "Baskerville", "Libre Baskerville", "Iowan Old Style", "Palatino", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --r: 3px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--tinte); font: 16px/1.5 var(--sans); }
a { color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--serif); font-weight: normal; margin: 0; }
h1 { font-size: 30px; letter-spacing: .01em; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
.klein { font-size: 13px; color: var(--tinte-2); }
.zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.serif { font-family: var(--serif); }
.rechts { text-align: right; }
.leise { color: var(--tinte-3); }

/* ---- Kopf und Navigation ---- */
.kopf { background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.kopf-innen { max-width: 1240px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 28px; }
.marke { text-decoration: none; display: flex; flex-direction: column; line-height: 1.15; }
.marke b { font: normal 17px var(--serif); letter-spacing: .32em; }
.marke span { font: italic 13px var(--serif); color: var(--tinte-2); letter-spacing: .08em; }
.nav { display: flex; gap: 2px; flex-wrap: nowrap; flex: 1; min-width: 0; }
.nav a { white-space: nowrap; text-decoration: none; padding: 9px 11px; border-radius: var(--r); color: var(--tinte-2); font-size: 15px; }
.nav a:hover { background: var(--silver-z); color: var(--tinte); }
.nav a.an { background: var(--linen-z); color: var(--tinte); }
.nav .punkt { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 10px; font-size: 12px; text-align: center; background: var(--duck); color: #fff; }
.nav .punkt.rot { background: var(--blush-tief); }
.kopf .scan-knopf { margin-left: auto; }

.unten-nav { display: none; }

main { max-width: 1240px; margin: 0 auto; padding: 32px 24px 80px; }

/* ---- Rubrik wie auf der Farbkarte ---- */
.rubrik { display: flex; align-items: center; gap: 22px; margin: 44px 0 22px; }
.rubrik::before, .rubrik::after { content: ""; flex: 1; height: 1px; background: var(--taupe); opacity: .7; }
.rubrik h2 { font-size: 16px; letter-spacing: .34em; text-transform: uppercase; white-space: nowrap; }
.rubrik.links::before { flex: 0 0 0; }
.titel { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 8px; }
.titel p { margin: 6px 0 0; color: var(--tinte-2); font: italic 17px var(--serif); }

/* ---- Schaltflächen ---- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border: 0; border-radius: var(--r); font: 500 16px var(--sans); text-decoration: none; cursor: pointer;
  background: var(--linen-z); color: var(--tinte); border: 1px solid var(--linen); }
.knopf:hover { background: var(--linen); }
.knopf.haupt { background: var(--sage-tief); color: #fff; border-color: var(--sage-tief); }
.knopf.haupt:hover { background: #4f574b; }
.knopf.duck { background: var(--duck-tief); border-color: var(--duck-tief); color: #fff; }
.knopf.gross { min-height: 64px; font-size: 18px; padding: 0 30px; }
.knopf.voll { width: 100%; }
.knopf.klein { min-height: 36px; padding: 0 14px; font-size: 14px; }
.knopf.leise { background: transparent; border-color: var(--linie); color: var(--tinte-2); }
.knopf.gefahr { background: transparent; border-color: var(--blush); color: var(--blush-tief); }
.knopfreihe { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ---- Kacheln ---- */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.kacheln.sechs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kacheln.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .kacheln.sechs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nav a { padding: 9px 8px; font-size: 14px; } }
.kacheln.drei { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.kachel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 20px 22px 18px;
  text-decoration: none; display: block; position: relative; border-top: 6px solid var(--silver); }
a.kachel:hover { border-color: var(--taupe); border-top-color: inherit; }
.kachel .bez { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--tinte-2); }
.kachel .wert { font: normal 29px/1.2 var(--serif); margin: 10px 0 4px; font-variant-numeric: lining-nums tabular-nums; }
.kachel .unter { font: italic 15px var(--serif); color: var(--tinte-2); }
.kachel.sage { border-top-color: var(--sage); }
.kachel.blush { border-top-color: var(--blush); }
.kachel.duck { border-top-color: var(--duck); }
.kachel.champagne { border-top-color: var(--champagne); }
.kachel.linen { border-top-color: var(--linen); }
.kachel.taupe { border-top-color: var(--taupe); }
.kachel.voll-sage { background: var(--sage-z); }
.kachel.voll-blush { background: var(--blush-z); }

/* Personen-Kachel */
.personkachel { padding: 22px 24px 20px; }
.personkachel .kopfzeile { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.personkachel h3 { font-size: 22px; }
.personkachel .vertrag { font-size: 13px; color: var(--tinte-2); margin-top: 2px; }
.balken { display: flex; height: 10px; border-radius: 2px; overflow: hidden; background: var(--silver-z); margin: 16px 0 14px; }
.balken i { display: block; height: 100%; }
.b-sage { background: var(--sage); } .b-blush { background: var(--blush); } .b-duck { background: var(--duck); }
.b-champagne { background: var(--champagne); } .b-taupe { background: var(--taupe); }
.werte { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; font-size: 14px; }
.werte div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dotted var(--linie); padding-bottom: 3px; }
.werte span { color: var(--tinte-2); }
.legende { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--tinte-2); margin-top: 10px; }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

/* ---- Marken (Status) ---- */
.marke-s { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 13px; white-space: nowrap; background: var(--silver-z); color: var(--tinte-2); }
.marke-s.sage { background: var(--sage-z); color: var(--sage-tief); }
.marke-s.blush { background: var(--blush-z); color: var(--blush-tief); }
.marke-s.duck { background: var(--duck-z); color: var(--duck-tief); }
.marke-s.champagne { background: var(--champagne-z); color: var(--champagne-tief); }
.marke-s.linen { background: var(--linen-z); color: var(--tinte-2); }

/* ---- Hinweise ---- */
.meldung { padding: 12px 16px; border-radius: var(--r); margin: 6px 0; font-size: 15px; border-left: 4px solid var(--champagne); background: var(--champagne-z); }
.meldung.achtung { border-left-color: var(--blush-tief); background: var(--blush-z); }
.meldung.gut { border-left-color: var(--sage); background: var(--sage-z); }
.flash { max-width: 1240px; margin: 18px auto -10px; padding: 0 24px; }

/* ---- Listen ---- */
.liste { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); }
.zeile { display: grid; grid-template-columns: 54px minmax(0, 2.4fr) minmax(0, 1.1fr) 120px minmax(0, 1.5fr) 40px; gap: 16px; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--linie); text-decoration: none; }
.zeile:last-child { border-bottom: 0; }
a.zeile:hover { background: var(--grund); }
.zeile .bild { width: 54px; height: 54px; border-radius: 2px; background: var(--silver-z) center/cover no-repeat; display: flex; align-items: center; justify-content: center; font: 18px var(--serif); color: var(--tinte-3); }
.zeile .haupt b { font-weight: 600; }
.zeile .haupt div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeile .warn { color: var(--blush-tief); font-size: 18px; text-align: center; }
.kuerzel { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--linen); align-items: center; justify-content: center; font: 13px var(--serif); margin-right: 6px; flex: none; }
.summenzeile { display: flex; justify-content: space-between; padding: 14px 18px; background: var(--linen-z); font-family: var(--serif); font-size: 17px; }

/* ---- Filter ---- */
.filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 18px 0; }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid var(--linie); background: var(--flaeche);
  text-decoration: none; font-size: 15px; color: var(--tinte-2); cursor: pointer; }
.chip:hover { border-color: var(--taupe); }
.chip.an { background: var(--tinte); color: #fff; border-color: var(--tinte); }
.filter .trenner { width: 1px; height: 26px; background: var(--linie); margin: 0 6px; }
input[type=search], input[type=text], input[type=date], input[type=password], input[type=number], select, textarea {
  font: 16px var(--sans); color: var(--tinte); background: var(--flaeche); border: 1px solid var(--taupe); border-radius: var(--r); padding: 11px 12px; min-height: 46px; width: 100%; }
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--duck); outline-offset: 0; border-color: var(--duck); }
.filter input[type=search] { width: 240px; min-height: 40px; border-radius: 20px; padding: 6px 16px; }
.filter select { width: auto; min-height: 40px; border-radius: 20px; padding: 6px 14px; }
label { display: block; font-size: 13px; letter-spacing: .06em; color: var(--tinte-2); margin-bottom: 6px; }

/* ---- Formulare / Detail ---- */
.zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; align-items: start; }
.feld { margin-bottom: 16px; }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.felder .breit { grid-column: 1 / -1; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 22px 24px; margin-bottom: 20px; }
.karte h3 { margin-bottom: 14px; }
.karte.duck { border-top: 6px solid var(--duck); }
.karte.sage { border-top: 6px solid var(--sage); }
.karte.blush { border-top: 6px solid var(--blush); }
.karte.champagne { border-top: 6px solid var(--champagne); }
.seiten { display: grid; gap: 12px; position: sticky; top: 16px; }
.seiten a { border: 1px solid var(--linie); border-radius: var(--r); overflow: hidden; background: #fff; }
.seiten .pdf { padding: 28px; text-align: center; font-family: var(--serif); text-decoration: none; }
.leer { padding: 40px; text-align: center; border: 1px dashed var(--taupe); border-radius: var(--r); color: var(--tinte-2); font: italic 17px var(--serif); background: var(--flaeche); }

table.tab { width: 100%; border-collapse: collapse; background: var(--flaeche); font-size: 15px; }
.tab th { text-align: left; font-weight: normal; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-2); padding: 10px 12px; border-bottom: 1px solid var(--taupe); }
.tab td { padding: 11px 12px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tab tr.summe td { font-family: var(--serif); font-size: 16px; border-bottom: 0; background: var(--linen-z); }
.tab-rahmen { border: 1px solid var(--linie); border-radius: var(--r); overflow-x: auto; }

/* ---- Scan ---- */
.scan { max-width: 640px; margin: 0 auto; }
.scan .wahl { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 22px; }
.scan .wahl .chip { min-height: 46px; font-size: 16px; }
.scan-seiten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
.scan-seiten .s { position: relative; aspect-ratio: 3/4; background: var(--silver-z) center/cover; border-radius: var(--r); border: 1px solid var(--linie); display: flex; align-items: center; justify-content: center; font-family: var(--serif); }
.scan-seiten .s b { position: absolute; left: 6px; top: 6px; background: rgba(255,255,255,.9); border-radius: 10px; padding: 0 8px; font: 13px var(--sans); }
.scan-seiten .s button { position: absolute; right: 4px; top: 4px; width: 32px; height: 32px; border-radius: 16px; border: 0; background: rgba(51,49,45,.75); color: #fff; font-size: 18px; cursor: pointer; }
.kamera { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 150px;
  background: var(--sage-tief); color: #fff; border-radius: var(--r); font: 22px var(--serif); cursor: pointer; border: 0; letter-spacing: .02em; }
.kamera small { font: 14px var(--sans); opacity: .85; }
.kamera:active { background: #4f574b; }
.fortschritt { height: 6px; background: var(--silver-z); border-radius: 3px; overflow: hidden; margin-top: 12px; display: none; }
.fortschritt i { display: block; height: 100%; width: 0; background: var(--duck); transition: width .2s; }

/* ---- Anmeldung ---- */
.anmeldung { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.anmeldung .karte { width: 100%; max-width: 420px; padding: 40px 36px; text-align: center; border-top: 6px solid var(--sage); }
.anmeldung .marke { align-items: center; margin-bottom: 30px; }
.anmeldung .marke b { font-size: 22px; }

/* ---- Druck (Ablehnungsübersicht) ---- */
@media print {
  .kopf, .unten-nav, .filter, .knopfreihe, .flash, .nicht-drucken { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  main { padding: 0; max-width: none; }
  .karte, .tab-rahmen { border: 0; padding: 0; }
  .tab td, .tab th { padding: 5px 6px; }
  .gruppe { break-inside: auto; }
  .rubrik { margin: 18pt 0 8pt; }
  a { text-decoration: none; }
}

/* ---- Handy ---- */
@media (max-width: 820px) {
  .kopf-innen { padding: 12px 16px; }
  .nav, .kopf .scan-knopf { display: none; }
  main { padding: 20px 16px 120px; }
  h1 { font-size: 25px; }
  .rubrik { margin: 32px 0 16px; gap: 12px; }
  .rubrik h2 { font-size: 13px; letter-spacing: .26em; }
  .kacheln, .kacheln.sechs, .kacheln.vier { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kacheln.sechs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kacheln.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .kacheln.sechs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nav a { padding: 9px 8px; font-size: 14px; } }
.kacheln.drei { grid-template-columns: 1fr; }
  .kachel { padding: 14px 14px 12px; }
  .kachel .wert { font-size: 23px; }
  .kachel .bez { font-size: 11px; letter-spacing: .14em; }
  .zwei { grid-template-columns: 1fr; }
  .seiten { position: static; grid-template-columns: repeat(2, 1fr); }
  .felder { grid-template-columns: 1fr; }
  .zeile { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px 12px; padding: 12px 14px; }
  .zeile .bild { width: 46px; height: 46px; }
  .zeile .nur-gross { display: none; }
  .zeile .status { grid-column: 2 / -1; }
  .filter input[type=search] { width: 100%; }
  .unten-nav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; background: var(--flaeche);
    border-top: 1px solid var(--linie); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); z-index: 10; }
  .unten-nav a { text-decoration: none; text-align: center; font-size: 12px; color: var(--tinte-2); padding: 6px 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .unten-nav a svg { width: 24px; height: 24px; }
  .unten-nav a.an { color: var(--tinte); }
  .unten-nav a.scan-mitte { color: #fff; }
  .unten-nav a.scan-mitte span { background: var(--sage-tief); width: 56px; height: 56px; border-radius: 28px; display: flex; align-items: center; justify-content: center; margin-top: -22px; border: 4px solid var(--grund); }
  .unten-nav a.scan-mitte em { color: var(--tinte); font-style: normal; }
  .tab { font-size: 14px; }
  .tab th, .tab td { padding: 8px; }
}