/* Tierrechnung — Gestaltung.
   Bewusst ohne externe Schriften oder Bibliotheken: nichts wird von fremden
   Servern nachgeladen, damit die Seite die Datenschutzzusage auch einhaelt. */

:root{
  /* Helles, freundliches Farbbild. Warmes Papier statt kaltem Weiss,
     ein ruhiges Blaugruen als Akzent — sachlich, aber nicht nach Amt. */
  --ground:#FBF9F5;
  --surface:#FFFFFF;
  --surface-2:#F3EFE8;
  --ink:#1F2429;
  --ink-2:#4A5560;
  --muted:#7C8794;
  --line:#E6E0D6;
  --line-2:#D3CBBE;
  --accent:#1F6F6B;
  --accent-dark:#175451;
  --accent-soft:#E2F0EE;
  --warn:#A85A12;
  --warn-soft:#FBF0E2;
  --crit:#9E3320;
  --good:#2C7A52;
  --good-soft:#E4F1E9;
  --radius:12px;
  --schatten:0 1px 2px rgba(31,36,41,.05), 0 8px 26px rgba(31,36,41,.06);

  --f-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}



*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; padding-inline:20px;
  background:var(--ground); color:var(--ink);
  font-family:var(--f-ui); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:780px; margin:0 auto; padding-block:0 72px}

/* Spuren im Hintergrund: Hund, Katze, Vogel, Kaninchen, Pferd.
   Liegen hinter allem, sind bewusst kaum sichtbar und duerfen die
   Lesbarkeit nicht stoeren. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-color:var(--ground);
  background-image:url("pfoten.svg");
  background-position:top center;
  background-size:1200px auto;
  background-repeat:repeat-y;
}
@media (max-width:760px){
  body::before{background-size:800px auto}
}


h1,h2,h3{margin:0; line-height:1.15; text-wrap:balance; font-weight:700; letter-spacing:-.02em}
h1{font-size:clamp(1.9rem,5.5vw,2.8rem)}
h2{font-size:1.4rem; letter-spacing:-.015em}
h3{font-size:1.02rem; letter-spacing:-.005em}
p{margin:0}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,label:focus-visible{
  outline:3px solid var(--accent); outline-offset:2px; border-radius:4px;
}

/* ---------- Kopf ---------- */
header.top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-block:15px; border-bottom:1px solid var(--line); margin-bottom:26px; flex-wrap:wrap;
}
.marke{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.02em; font-size:1.06rem; color:var(--ink); text-decoration:none}
.marke .zeichen{
  width:28px; height:28px; border-radius:7px; background:var(--accent); color:#fff;
  display:grid; place-items:center; flex:none;
}
.marke .zeichen svg{width:18px; height:18px}
.top nav{display:flex; gap:18px; font-size:.88rem}
.top nav a{color:var(--muted); text-decoration:none}
.top nav a:hover{color:var(--ink)}

/* ---------- Einstieg ---------- */
.hero{display:flex; flex-direction:column; gap:11px; margin-bottom:20px; position:relative}
.hero h1{color:var(--ink)}
.hero .bild{
  position:absolute; right:-6px; top:-14px; width:132px; height:132px;
  opacity:.5; pointer-events:none;
}
@media (max-width:760px){ .hero .bild{display:none} }
.hero p.lede{font-size:1.14rem; color:var(--ink-2); max-width:56ch}
.hero .quelle{font-size:.86rem; color:var(--muted)}

/* ---------- Einlesen ---------- */
.karte-lesen{margin-bottom:0}
.ablage{
  display:block; border:2px dashed var(--line-2); border-radius:var(--radius);
  padding:18px 16px; text-align:center; cursor:pointer;
  transition:border-color .15s, background .15s;
}
.ablage:hover,.ablage.aktiv{border-color:var(--accent); background:var(--accent-soft)}
.ablage .gross{font-size:1.04rem; font-weight:600; display:block; margin-bottom:6px}
.ablage .klein{font-size:.87rem; color:var(--muted); display:block; max-width:52ch; margin:0 auto; line-height:1.45}
.ablage input[type=file]{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
#leseInfo:not(:empty){margin-top:16px}

.oder{
  text-align:center; font-size:.82rem; color:var(--muted);
  margin:13px 0; display:flex; align-items:center; gap:14px;
}
.oder::before,.oder::after{content:""; flex:1; height:1px; background:var(--line)}

/* Zeile, die beim Einlesen nicht sicher zugeordnet werden konnte */
.eingabezeile.unsicher{border-color:var(--warn); background:var(--warn-soft)}

/* ---------- Eingabe ---------- */
.karte{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px; box-shadow:var(--schatten);
}

.kopfzeile{
  display:flex; flex-wrap:wrap; gap:11px 22px; align-items:center;
  padding-bottom:13px; border-bottom:1px solid var(--line); margin-bottom:13px;
}
.schalter{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.87rem; color:var(--ink-2)}
.schalter label{display:flex; align-items:center; gap:8px; cursor:pointer}
.schalter input[type=checkbox]{width:17px; height:17px; accent-color:var(--accent); cursor:pointer; flex:none}

.feld{display:flex; flex-direction:column; gap:5px; position:relative; min-width:0}
.feld label{font-size:.76rem; font-weight:600; color:var(--muted); letter-spacing:.03em; text-transform:uppercase}
.feld input,.feld select{
  font:inherit; font-size:.95rem; color:var(--ink); background:var(--ground);
  border:1px solid var(--line-2); border-radius:7px; padding:9px 11px; width:100%;
}
.feld input:focus,.feld select:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
.feld-tier{max-width:190px}

.schnellwahl-titel{font-size:.74rem; color:var(--muted); margin-bottom:6px; font-weight:600; letter-spacing:.03em; text-transform:uppercase}
.schnellwahl{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px}
.chip{
  font:inherit; font-size:.86rem; color:var(--ink-2); background:var(--surface-2);
  border:1px solid var(--line-2); border-radius:999px; padding:6px 13px; cursor:pointer;
}
.chip:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}

.zeilen{display:flex; flex-direction:column; gap:14px}
.eingabezeile{border:1px solid var(--line); border-radius:var(--radius); padding:13px 14px; background:var(--ground)}
.zeilenkopf{display:grid; grid-template-columns:minmax(0,1fr) 116px 78px auto; gap:11px; align-items:end}

.weg{
  font:inherit; font-size:1.3rem; line-height:1; color:var(--muted); background:none;
  border:1px solid var(--line-2); border-radius:7px; width:38px; height:38px; cursor:pointer; flex:none;
}
.weg:hover{color:var(--warn); border-color:var(--warn)}

/* Vorschlagsliste */
.vorschlaege{
  display:none; position:absolute; top:100%; left:0; right:0; z-index:20; margin-top:4px;
  background:var(--surface); border:1px solid var(--line-2); border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.14); max-height:290px; overflow-y:auto;
}
.vorschlaege.offen{display:block}
.vorschlag{
  display:block; width:100%; text-align:left; font:inherit; background:none;
  border:none; border-bottom:1px solid var(--line); padding:9px 12px; cursor:pointer;
}
.vorschlag:last-child{border-bottom:none}
.vorschlag:hover,.vorschlag.aktiv{background:var(--accent-soft)}
.v-text{display:block; font-size:.9rem; color:var(--ink); line-height:1.35}
.v-satz{display:block; font-size:.78rem; color:var(--muted); font-family:var(--f-mono); margin-top:2px}

/* Sofortige Einschaetzung */
.ampel{display:none; margin-top:10px; font-size:.87rem; padding:8px 11px; border-radius:7px; line-height:1.4}
.ampel.gruen{display:block; background:var(--good-soft); color:var(--good); border:1px solid var(--good)}
.ampel.rot{display:block; background:var(--warn-soft); color:var(--warn); border:1px solid var(--warn)}

.knopfreihe{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:20px}
button.knopf{
  font:inherit; font-weight:600; color:#fff; background:var(--accent);
  border:none; border-radius:8px; padding:13px 26px; cursor:pointer;
}
button.knopf:hover{background:var(--accent-dark)}
button.knopf[disabled]{opacity:.45; cursor:not-allowed}
button.knopf-leise{
  font:inherit; font-weight:600; color:var(--accent); background:none;
  border:1px solid var(--line-2); border-radius:8px; padding:12px 18px; cursor:pointer;
}
button.knopf-leise:hover{border-color:var(--accent); background:var(--accent-soft)}

/* ---------- Zustaende ---------- */
.laeuft{display:flex; gap:13px; align-items:center; padding:20px 0; color:var(--ink-2)}
.spinner{
  width:20px; height:20px; border:2.5px solid var(--line-2); border-top-color:var(--accent);
  border-radius:50%; animation:dreh .8s linear infinite; flex:none;
}
@keyframes dreh{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .spinner{animation:none} }

.meldung{
  border-radius:var(--radius); padding:16px 18px; font-size:.95rem;
  background:var(--warn-soft); border:1px solid var(--warn); color:var(--ink);
}

/* ---------- Ergebnis ---------- */
.ergebnis{margin-top:32px; display:none; flex-direction:column; gap:20px}
.ergebnis.zeigen{display:flex}

.fazit{
  border-radius:var(--radius); padding:20px 22px; border:1px solid var(--line-2);
  background:var(--surface); display:flex; flex-direction:column; gap:8px;
}
.fazit.hat-funde{border-color:var(--warn); background:var(--warn-soft)}
.fazit.sauber{border-color:var(--good); background:var(--good-soft)}
.fazit .zahl{font-size:1.5rem; font-weight:700; letter-spacing:-.02em}
.fazit .text{font-size:.96rem; color:var(--ink-2)}

.tabelle{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); box-shadow:var(--schatten)}
.zeile{
  display:grid; grid-template-columns:minmax(0,1.1fr) auto minmax(0,1.1fr);
  gap:10px 18px; padding:15px 18px; border-bottom:1px dashed var(--line);
}
.zeile:last-child{border-bottom:none}
.zeile.pruefen{background:var(--warn-soft)}
.pos .bez{font-weight:600; font-size:.95rem}
.pos .sub{display:block; color:var(--muted); font-size:.83rem; margin-top:3px; font-family:var(--f-mono)}
.betrag{font-family:var(--f-mono); font-weight:700; font-size:.95rem; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.urteil .titel{display:block; font-weight:700; font-size:.83rem; margin-bottom:3px; letter-spacing:.01em}
.urteil .text{font-size:.88rem; color:var(--ink-2); line-height:1.45}
.urteil .paragraf{display:inline-block; margin-top:6px; font-family:var(--f-mono); font-size:.74rem; color:var(--muted)}
.t-ok .titel{color:var(--good)}
.t-pruefen .titel{color:var(--warn)}
.t-info .titel,.t-unklar .titel{color:var(--muted)}

.hinweis{
  border-left:3px solid var(--accent); background:var(--accent-soft);
  padding:15px 18px; border-radius:0 var(--radius) var(--radius) 0;
}
.hinweis b{display:block; margin-bottom:4px}
.hinweis p{font-size:.92rem; color:var(--ink-2)}

.naechster-schritt{border:1px solid var(--line-2); border-radius:var(--radius); padding:20px 22px; background:var(--surface)}
.naechster-schritt ol{margin:10px 0 0; padding-left:20px; font-size:.94rem; color:var(--ink-2)}
.naechster-schritt li{margin-bottom:7px}

/* ---------- Inhaltsbloecke ---------- */
section.block{margin-top:44px; display:flex; flex-direction:column; gap:14px}
section.block p{max-width:64ch; color:var(--ink-2); font-size:.98rem}
/* Vier Kacheln: entweder untereinander oder sauber 2x2 — nie 3+1 mit Leerraum. */
.regeln{display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
@media (min-width:560px){ .regeln{grid-template-columns:1fr 1fr} }
.regel{background:var(--surface); padding:17px 18px}
.regel .p{font-family:var(--f-mono); font-size:.74rem; color:var(--accent); font-weight:600; letter-spacing:.04em}
.regel h3{margin:6px 0 5px}
.regel p{font-size:.88rem; color:var(--ink-2); margin:0}

details.faq{border-bottom:1px solid var(--line); padding:14px 0}
details.faq summary{cursor:pointer; font-weight:600; font-size:.98rem; list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:center}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+"; color:var(--muted); font-weight:400; font-size:1.25rem; line-height:1; flex:none}
details.faq[open] summary::after{content:"–"}
details.faq p{margin-top:10px; font-size:.93rem; color:var(--ink-2); max-width:64ch}

footer.unten{margin-top:60px; padding-top:22px; border-top:1px solid var(--line); font-size:.85rem; color:var(--muted); display:flex; flex-direction:column; gap:10px}
footer.unten nav{display:flex; gap:18px; flex-wrap:wrap}
footer.unten a{color:var(--muted)}

.rechtshinweis{font-size:.82rem; color:var(--muted); max-width:64ch; line-height:1.5}

@media (max-width:640px){
  .zeile{grid-template-columns:minmax(0,1fr) auto}
  .urteil{grid-column:1 / -1; border-top:1px solid var(--line); padding-top:9px; margin-top:2px}
}
@media (max-width:480px){
  body{font-size:16px}
  .karte{padding:17px}
  .ablage{padding:26px 14px}
}

@media (max-width:560px){
  .zeilenkopf{grid-template-columns:minmax(0,1fr) 78px; grid-template-areas:"l l" "b m"; row-gap:12px}
  .feld-leistung{grid-area:l}
  .feld-betrag{grid-area:b}
  .feld-menge{grid-area:m}
  .weg{position:absolute; top:11px; right:11px; width:30px; height:30px; font-size:1.05rem}
  .eingabezeile{position:relative; padding-top:13px}
  .feld-leistung label{padding-right:40px}
  .feld-tier{max-width:none; width:100%}
}


/* ---------- Ampel: wie teuer ist das? ---------- */
.skala{
  grid-column:1 / -1; margin-top:14px; padding:13px 15px 11px;
  background:var(--surface-2); border-radius:10px;
}
.skala-kopf{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:9px}
.skala-titel{font-size:.8rem; font-weight:700; color:var(--ink-2)}
.skala-anzahl{font-family:var(--f-mono); font-size:.7rem; color:var(--muted)}

.leiter{display:grid; grid-template-columns:repeat(6,1fr); gap:3px}
.stufe{
  position:relative; border-radius:5px; padding:7px 3px 6px; text-align:center;
  min-height:38px; display:flex; flex-direction:column; justify-content:center; gap:2px;
  opacity:.34; transition:opacity .15s;
}
.stufe-wort{font-size:.63rem; font-weight:700; line-height:1.15; color:#2A2318; letter-spacing:.01em}
.stufe-wert{font-family:var(--f-mono); font-size:.78rem; font-weight:700; color:#2A2318}

/* Farbverlauf guenstig -> teuer */
.s-a{background:#8FCB9B}
.s-b{background:#C7DE8E}
.s-c{background:#F2DE84}
.s-d{background:#F3BC77}
.s-e{background:#EC9370}
.s-f{background:#DC6B5B}

/* Bereich, in dem andere Rechnungen liegen */
.stufe.andere{opacity:.72}
.stufe.andere::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--ink-2); opacity:.45; border-radius:0 0 5px 5px;
}
/* Die eigene Stufe */
.stufe.meine{
  opacity:1; box-shadow:0 0 0 2.5px var(--ink); z-index:1;
  transform:scale(1.04);
}

.skala-wort{margin-top:9px; font-size:.83rem; color:var(--ink-2); display:flex; flex-wrap:wrap; gap:4px 14px; align-items:center}
.legende{display:inline-flex; align-items:center; gap:5px; font-size:.72rem; color:var(--muted)}
.legende-kasten{
  display:inline-block; width:15px; height:8px; border-radius:2px;
  background:var(--line-2); border-bottom:3px solid var(--ink-2);
}

@media (max-width:520px){
  .leiter{grid-template-columns:repeat(3,1fr); gap:4px}
  .stufe{min-height:42px}
  .stufe-wort{font-size:.66rem}
}

/* ---------- Feinschliff ---------- */
.eingabezeile{transition:border-color .15s, background .15s}
.eingabezeile:focus-within{border-color:var(--accent); background:var(--surface)}
.fazit{box-shadow:var(--schatten)}
.regel{transition:background .15s}
.regel:hover{background:var(--accent-soft)}

/* Groessere Trefferflaechen auf Beruehrgeraeten. Die Kaestchen selbst bleiben
   klein, aber das ganze Label ist anklickbar und hoch genug zum Treffen. */
.schalter label{min-height:40px; padding-block:4px}
.schalter input[type=checkbox]{width:20px; height:20px}
.top nav a{display:inline-flex; align-items:center; min-height:40px}
.chip{min-height:38px; display:inline-flex; align-items:center}
@media (max-width:760px){
  .feld input,.feld select{min-height:44px}
  .weg{width:36px; height:36px}
  footer.unten a{display:inline-flex; align-items:center; min-height:40px}
}