/* Kratzbaum-Reparatur – oeffentliche Kundenseite.
   Gleiche Farbwelt wie der Rechner: Werkstatt-Petrol und Sisalgold. */

:root {
  --petrol:      #0E3A44;
  --petrol-dark: #082A32;
  --petrol-soft: #2B5A64;
  --sisal:       #BE7D1E;
  --sisal-hell:  #F3E3C6;
  --paper:       #F4F5F2;
  --karte:       #FFFFFF;
  --linie:       #DCE1DC;
  --tinte:       #16232A;
  --gedaempft:   #5F6F6E;
  --gruen:       #2E7D4F;
  --rot:         #A33724;
  --grau:        #C3CAC6;

  --radius:   14px;
  --radius-s: 8px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--tinte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
input, select, button, textarea { font: inherit; color: inherit; }
a { color: var(--petrol); }

/* ---------- Kopfleiste ---------- */

.kopfleiste {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(env(safe-area-inset-top) + 11px) 16px 11px;
  background: var(--petrol);
  color: #fff;
}

.marke {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  text-decoration: none;
  font-weight: 640;
  letter-spacing: -0.01em;
  font-size: 16px;
}

.marke-zeichen {
  width: 20px; height: 24px;
  border-radius: 4px;
  background:
    repeating-linear-gradient(180deg,
      var(--sisal) 0 3px, #9C6416 3px 4px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
  flex: none;
}

.kopf-menue a {
  color: var(--sisal-hell);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 560;
  padding: 7px 12px;
  border: 1px solid rgba(243,227,198,.35);
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- Banner ---------- */

.banner {
  background: var(--petrol-dark);
  color: #fff;
  padding: 34px 20px 36px;
  text-align: center;
  border-bottom: 3px solid var(--sisal);
}

.banner--bild {
  background-size: cover;
  background-position: center;
  padding: 58px 20px 60px;
}

.banner p {
  margin: 0 auto;
  max-width: 620px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* ---------- Grundraster ---------- */

.bahn {
  max-width: 720px;
  margin: 0 auto;
  padding: 4px 16px 40px;
}

.block {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 20px 18px;
  margin: 18px 0;
}

.block h1 {
  margin: 0 0 10px;
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.block h2 {
  margin: 0 0 10px;
  font-size: 20px;
  letter-spacing: -0.015em;
}

.block h2::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin-top: 7px;
  background: var(--sisal);
  border-radius: 2px;
}

.fliess { margin: 0 0 6px; color: #29383E; }
.gedaempft { color: var(--gedaempft); font-size: 14.5px; }

/* ---------- Galerie ---------- */

.galerie { display: grid; gap: 16px; margin-top: 14px; }

.arbeit {
  border: 1px solid var(--linie);
  border-radius: var(--radius-s);
  overflow: hidden;
  background: #FBFBF9;
}

.arbeit-bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linie); }
.arbeit-bilder figure:only-child { grid-column: 1 / -1; }
.arbeit-bilder figure { margin: 0; position: relative; background: #fff; }
.arbeit-bilder img { width: 100%; height: 190px; object-fit: cover; }

.arbeit-bilder figcaption {
  position: absolute;
  left: 8px; bottom: 8px;
  background: rgba(8,42,50,.82);
  color: #fff;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
}

.arbeit-text { padding: 13px 14px 15px; }
.arbeit-text h3 { margin: 0 0 4px; font-size: 17px; }
.arbeit-text p { margin: 0; font-size: 15px; color: #33454B; }

.eckdaten {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 11px 0 0;
}

.eckdaten > div {
  background: var(--sisal-hell);
  border-radius: 999px;
  padding: 4px 12px;
  display: flex;
  gap: 6px;
  align-items: baseline;
}

.eckdaten dt { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #7A5312; }
.eckdaten dd { margin: 0; font-size: 14.5px; font-weight: 600; }

/* ---------- Kalender ---------- */

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 12px 0 4px;
  font-size: 14px;
  color: var(--gedaempft);
}
.legende span { display: flex; align-items: center; gap: 6px; }

.punkt { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.punkt--frei { background: var(--gruen); }
.punkt--vergeben { background: var(--rot); }
.punkt--zu { background: var(--grau); }

.monate { display: grid; gap: 18px; margin: 14px 0 18px; }
.monat h3 { margin: 0 0 8px; font-size: 16px; color: var(--petrol); }

.wochenkopf, .raster {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.wochenkopf span {
  text-align: center;
  font-size: 11.5px;
  color: var(--gedaempft);
  padding-bottom: 4px;
}

.tag {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  background: #EEF0EC;
  color: #7B8785;
}

.tag--frei { background: #E2F1E7; color: #1E5C39; font-weight: 640; box-shadow: inset 0 0 0 1px #B8DBC6; }
.tag--vergeben { background: #F7E2DE; color: #8A2C1C; box-shadow: inset 0 0 0 1px #E8C2B9; }
.tag--leer { background: none; }
.tag--alt { opacity: .38; }

/* ---------- Knoepfe ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--petrol);
  color: #fff;
  border: 1px solid var(--petrol);
  border-radius: 999px;
  padding: 13px 22px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.knopf:active { transform: translateY(1px); }
.knopf--gross { width: 100%; padding: 16px 22px; font-size: 17px; }
.knopf--still { background: #fff; color: var(--petrol); border-color: var(--linie); }
.knopf--gruen { background: var(--gruen); border-color: var(--gruen); }
.knopf--warn { background: #fff; color: var(--rot); border-color: #E3C4BD; }
.knopf--klein { padding: 9px 15px; font-size: 14.5px; }

/* ---------- Formulare ---------- */

.feld { margin-bottom: 15px; }

.feld > label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--petrol);
  margin-bottom: 5px;
}

.feld small { display: block; margin-top: 5px; font-size: 13px; color: var(--gedaempft); }

.eingabe {
  width: 100%;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius-s);
  padding: 13px 14px;
  font-size: 16.5px;
}

.eingabe:focus { outline: 2px solid var(--petrol-soft); outline-offset: 1px; }
textarea.eingabe { min-height: 110px; resize: vertical; }

.pflicht { color: var(--sisal); }

.haken {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  background: #FAFAF8;
  border: 1px solid var(--linie);
  border-radius: var(--radius-s);
  padding: 13px 14px;
  font-size: 14.5px;
  line-height: 1.45;
}

.haken input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--petrol); }

.fehlerkasten, .hinweis-kasten, .gutkasten {
  border-radius: var(--radius-s);
  padding: 12px 14px;
  font-size: 14.5px;
  margin: 0 0 14px;
}

.fehlerkasten { background: #FBEAE6; border: 1px solid #E8C2B9; color: #7E2718; }
.fehlerkasten ul { margin: 0; padding-left: 18px; }
.hinweis-kasten { background: #FAF3E4; border: 1px solid #E7D4AE; color: #6E5010; }
.gutkasten { background: #E6F2EA; border: 1px solid #BEDCC9; color: #1E5C39; }

/* ---------- Konto ---------- */

.termin-karte {
  border: 1px solid var(--linie);
  border-radius: var(--radius-s);
  padding: 14px;
  margin-bottom: 12px;
  background: #FBFBF9;
}

.termin-kopf { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.termin-kopf b { font-size: 16px; }

.schild {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  font-weight: 600;
}
.schild--offen { background: #FAF3E4; color: #6E5010; }
.schild--bestaetigt { background: #E2F1E7; color: #1E5C39; }
.schild--abgesagt, .schild--storniert { background: #F1F1EF; color: #6A7573; }

.verlauf { display: grid; gap: 10px; margin: 12px 0; }

.blase {
  padding: 11px 13px;
  border-radius: 13px;
  font-size: 15px;
  max-width: 88%;
  white-space: pre-wrap;
}

.blase--kunde { background: var(--petrol); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.blase--admin { background: #EDEFEC; border-bottom-left-radius: 4px; }
.blase time { display: block; font-size: 11.5px; opacity: .7; margin-top: 4px; }

/* ---------- Fussleiste ---------- */

.fussleiste {
  background: var(--petrol-dark);
  color: #C9D6D8;
  padding: 24px 16px calc(env(safe-area-inset-bottom) + 26px);
  text-align: center;
  display: grid;
  gap: 10px;
  justify-items: center;
}

.fuss-knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sisal);
  color: #241703;
  border: none;
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 640;
  font-size: 15.5px;
  text-decoration: none;
  cursor: pointer;
}

.fuss-knopf svg { width: 19px; height: 19px; }
.fuss-knopf--leise { background: none; color: #C9D6D8; text-decoration: underline; font-weight: 500; padding: 4px; }
.fuss-zeile { margin: 4px 0 0; font-size: 13px; color: #8FA3A6; }

/* ---------- Fenster (Pop-ups) ---------- */

.ueberlage {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(8,26,31,.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ueberlage[hidden] { display: none; }

.fenster {
  background: var(--karte);
  border-radius: 18px;
  padding: 24px 20px 20px;
  width: 100%;
  max-width: 430px;
  max-height: 86vh;
  overflow-y: auto;
  box-shadow: 0 22px 50px rgba(4,20,24,.34);
  border-top: 4px solid var(--sisal);
  animation: auf .22s ease-out;
}

@keyframes auf {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.fenster h2 { margin: 0 0 10px; font-size: 21px; letter-spacing: -0.015em; }
.fenster p { margin: 0 0 12px; font-size: 15.5px; color: #2C3C42; }

.fenster-zeichen {
  display: block;
  width: 42px; height: 42px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: repeating-linear-gradient(180deg, var(--sisal) 0 5px, #9C6416 5px 7px);
}

.datum-schild {
  display: inline-block;
  background: var(--sisal-hell);
  color: #6E4E10;
  font-weight: 640;
  font-size: 14.5px !important;
  padding: 5px 13px;
  border-radius: 999px;
  margin: 0 0 12px !important;
}

.fenster-knoepfe { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.fenster-knoepfe--gestapelt { flex-direction: column; }
.fenster-knoepfe--gestapelt .knopf { width: 100%; }

.einwilligung-hinweis { font-size: 13.5px !important; color: var(--gedaempft) !important; }
.hinweis-klein { font-size: 13px; color: var(--gedaempft); }

/* ---------- Rechtstexte ---------- */

.rechtstext h2 { font-size: 18px; margin: 22px 0 6px; }
.rechtstext h2::after { display: none; }
.rechtstext p, .rechtstext li { font-size: 15px; color: #2C3C42; }
.rechtstext address { font-style: normal; line-height: 1.6; }

@media (min-width: 620px) {
  .arbeit-bilder img { height: 240px; }
  .monate { grid-template-columns: 1fr 1fr; }
}