/*
 * ====================================================================
 * style.css – Erscheinungsbild
 * ====================================================================
 * ANPASSEN: Farben und Schriften in :root (ganz oben).
 *
 * Überschrift nach Vorlage «Praxis App – Fonts.docx»:
 *   Futura Medium, 20 pt, Zeichenabstand +4,7 pt (= 0,235 em),
 *   Zeichenbreite 90 %, doppelte Leerzeichen zwischen den Wörtern.
 *   Futura ist auf Mac, iPhone und iPad vorinstalliert. Auf anderen
 *   Geräten wird eine ähnliche Schrift verwendet. Es werden bewusst
 *   keine Schriften von Google o. Ä. nachgeladen (kein Datenabfluss).
 * ====================================================================
 */
:root {
  --hintergrund: #F0EAD6;   /* Eierschalengelb */
  --flaeche:     #FBF8EF;   /* Karten, Eingabefelder */
  --text:        #2B2A26;
  --grau:        #6E6A5E;
  --linie:       #D9D0B8;
  --akzent:      #7A6A45;   /* Knöpfe, Markierung */
  --fehler:      #A3362B;
  --erfolg:      #3F6B3A;
  --schrift:     -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--hintergrund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.45;
}

/* ---- Kopfzeile mit Überschrift ---------------------------------- */
header {
  position: relative;
  text-align: center;
  padding: 40px 16px 24px;
}
.titel {
  display: inline-block;
  margin: 0;
  font-family: "Futura", "Futura PT", "Century Gothic", "Avenir Next", sans-serif;
  font-weight: 500;                 /* Medium */
  font-size: 20pt;
  letter-spacing: 0.235em;          /* +4,7 pt bei 20 pt */
  margin-right: -0.235em;           /* Abstand nach letztem Buchstaben ausgleichen */
  white-space: pre;                 /* doppelte Leerzeichen erhalten */
  transform: scaleX(0.9);           /* Zeichenbreite 90 % */
  font-variant-ligatures: discretionary-ligatures historical-ligatures;
}
.abmelden {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 14px;
  color: var(--grau);
  text-decoration: none;
}

/* ---- Hauptbereich ----------------------------------------------- */
main {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 16px 60px;
}
main.schmal { max-width: 420px; }

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 20px;
  margin-top: 16px;
}
h2 { margin: 0 0 12px; font-weight: 600; font-size: 22px; }
h3 { margin: 20px 0 6px; font-size: 16px; color: var(--grau); font-weight: 600; }

/* ---- Suche ------------------------------------------------------- */
.suche { margin-top: 24px; }
#suchfeld {
  width: 100%;
  font-size: 22px;
  padding: 14px 18px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--flaeche);
  color: var(--text);
  outline: none;
}
#suchfeld:focus { border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(122, 106, 69, .15); }

#treffer { margin-top: 8px; }
.treffer-eintrag {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  margin-top: 6px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 10px;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.treffer-eintrag:hover, .treffer-eintrag.aktiv { border-color: var(--akzent); }
.treffer-eintrag .name { display: block; font-weight: 600; }
.treffer-eintrag.alias .name { color: var(--grau); font-weight: 400; }
.treffer-eintrag .inaktiv { color: var(--grau); font-weight: 400; }
.zusatz { color: var(--grau); font-size: 14px; }
.klein { font-size: 13px; margin-top: 24px; }

.frage p { margin: 0 0 8px; }

/* ---- Knöpfe ------------------------------------------------------ */
button {
  font: inherit;
  padding: 9px 18px;
  border-radius: 10px;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  color: var(--text);
  cursor: pointer;
}
button.primaer { background: var(--akzent); border-color: var(--akzent); color: #fff; }
button.link {
  background: none; border: none; padding: 0; margin-top: 12px;
  color: var(--akzent); text-decoration: underline; cursor: pointer;
}
.detail button.link, li button.link { margin-top: 0; }
.knoepfe { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* ---- Formular ---------------------------------------------------- */
.typwahl { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.typwahl label { cursor: pointer; }
.typwahl input { position: absolute; opacity: 0; }
.typwahl span {
  display: inline-block; padding: 7px 14px;
  border: 1px solid var(--linie); border-radius: 20px; background: #fff;
}
.typwahl input:checked + span { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.typwahl input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: 2px; }

.raster { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.feld { display: flex; flex-direction: column; }
.feld.breit { grid-column: 1 / -1; }
.feld[hidden] { display: none; }
.lab { font-size: 14px; color: var(--grau); margin-bottom: 3px; }
input, select, textarea {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
}
label > input:not([type="radio"]):not([type="checkbox"]) { width: 100%; }

.merkmale { margin-top: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip { cursor: pointer; }
.chip input { position: absolute; opacity: 0; }
.chip span {
  display: inline-block; padding: 4px 11px; font-size: 14px;
  border: 1px solid var(--linie); border-radius: 16px; background: #fff;
}
.chip input:checked + span { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Anmeldeformular */
form.karte > label { display: block; margin-bottom: 12px; color: var(--grau); font-size: 14px; }
form.karte > label input { display: block; margin-top: 3px; font-size: 17px; }

/* ---- Detailansicht ----------------------------------------------- */
.detail dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 12px 0 0; }
.detail dt { color: var(--grau); font-size: 14px; padding-top: 2px; }
.detail dd { margin: 0; white-space: pre-wrap; }
.detail ul { margin: 0; padding-left: 18px; }

/* ---- Meldungen --------------------------------------------------- */
.fehler  { color: var(--fehler); }
.erfolg  { color: var(--erfolg); font-weight: 600; margin-top: 0; }
.hinweis { color: var(--grau); }
.warnung { border-color: #C9A96A; background: #FBF3E0; }
p.warnung { padding: 8px 12px; border: 1px solid #C9A96A; border-radius: 8px; }

/* ---- Schmale Bildschirme (iPhone) ---------------------------------- */
@media (max-width: 560px) {
  header { padding-top: 48px; }
  .titel { font-size: 16pt; }
  .raster { grid-template-columns: 1fr; }
  #suchfeld { font-size: 19px; }
}

/* ---- Bearbeiten: Merkmale mit Gültigkeit und Status ---------------- */
.merkmal-tabelle { display: flex; flex-direction: column; gap: 6px; }
.merkmal-zeile {
  display: flex;
  flex-wrap: wrap;               /* bricht auf schmalen Bildschirmen um */
  gap: 8px 12px;
  align-items: center;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 8px;
}
.merkmal-zeile.entfernt { opacity: .5; }
.merkmal-zeile.entfernt .mname { text-decoration: line-through; }
.mname { font-weight: 600; flex: 1 1 140px; }
.datum { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.datum input { padding: 5px 8px; width: 150px; min-width: 0; }
.aktionen { display: inline-flex; gap: 6px; margin-left: auto; }
.klein-knopf { padding: 4px 10px; font-size: 14px; }
.merkmal-neu { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.merkmal-neu select { flex: 1 1 200px; min-width: 0; }
.status-box { margin-top: 10px; }
.status-box input[type="search"] { width: 100%; margin-top: 6px; }

@media (max-width: 560px) {
  .datum { flex: 1 1 100%; }
  .datum input { flex: 1; width: auto; }
  .aktionen { margin-left: 0; }
}

/* Neues Merkmal im Katalog definieren */
.neues-merkmal { background: #fff; margin-top: 10px; }
.neues-merkmal h3 { margin-top: 0; }
.neues-merkmal .feld { margin-bottom: 10px; }
.neues-merkmal[hidden] { display: none; }

/* Beziehungen in der Bearbeitung */
.ziel { font-weight: 400; }
.merkmal-zeile .ref { width: 200px; padding: 5px 8px; }
.bez-neu { margin-top: 10px; }
.bez-satz { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bez-satz select { flex: 1 1 220px; min-width: 0; }
.entitaet-auswahl input[type="search"] { width: 100%; margin-top: 8px; }
.bez-neu .merkmal-neu .ref { flex: 1 1 200px; min-width: 0; }
@media (max-width: 560px) {
  .merkmal-zeile .ref { flex: 1 1 100%; width: auto; }
}