/* LinkedIn-Assistent – Designsprache von Sevdas Speaker-Website (code/sevda/sevdahelpap.de/),
   nicht das KI-Entdecker-System. Mobile-first, eine Spalte. */
:root {
  --charcoal: #1a1a2e;
  --charcoal-light: #2d2d44;
  --gold: #c9a96e;
  --gold-light: #d4ba88;
  --gold-dark: #b08d4f;
  --cream: #faf8f5;
  --cream-dark: #f0ece6;
  --warm-gray: #8a8690;
  --warm-gray-light: #b8b4bf;
  --text-dark: #1a1a2e;
  --text-body: #4a4655;
  --text-light: #7a7685;
  --white: #ffffff;
  --fehler: #a4343a;
  --fehler-hell: #f8ecec;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, sans-serif;
  --ease-elegant: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --tab-hoehe: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}

main {
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 16px calc(var(--tab-hoehe) + 32px + env(safe-area-inset-bottom));
}

h1, h2 { font-family: var(--font-display); color: var(--text-dark); font-weight: 600; line-height: 1.15; margin: 0; }
h1 { font-size: 34px; }
h2 { font-size: 24px; }

.kopf { margin-bottom: 20px; }
.kopf-zeile { margin: 0 0 4px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dark); font-weight: 500; }

/* Felder – 16px, sonst zoomt Safari ungefragt (Spec 9) */
.feld-label { display: block; margin: 18px 0 6px; font-size: 14px; font-weight: 500; color: var(--text-dark); }
.optional { font-weight: 400; color: var(--text-light); }
.feld {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--text-dark);
  background: var(--white);
  border: 1px solid var(--cream-dark);
  border-radius: 12px;
  padding: 12px 14px;
  resize: none;
  transition: border-color 0.2s var(--ease-elegant), box-shadow 0.2s var(--ease-elegant);
}
.feld:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.22); }
.feld-post { min-height: 240px; line-height: 1.6; }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px;
  font: inherit; font-size: 15px; font-weight: 500;
  color: var(--text-dark); background: var(--white);
  border: 1px solid var(--cream-dark); border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s var(--ease-elegant), border-color 0.2s var(--ease-elegant), transform 0.15s var(--ease-elegant);
}
.knopf:active:not(:disabled) { transform: scale(0.98); }
.knopf:disabled { opacity: 0.5; cursor: default; }
.knopf-primaer { background: var(--gold); border-color: var(--gold); color: var(--charcoal); }
.knopf-primaer:hover:not(:disabled) { background: var(--gold-light); }
.knopf-leise { background: transparent; border-color: transparent; color: var(--text-light); }
.knopf-klein { min-height: 36px; padding: 0 12px; font-size: 14px; }
.knopf-breit { width: 100%; margin-top: 20px; }
.knopf-warnung { color: var(--fehler); border-color: var(--fehler); background: var(--white); }

/* Rückmeldungen */
.status { margin: 8px 0 0; min-height: 1.2em; font-size: 14px; color: var(--text-light); }
.fehler { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--fehler-hell); color: var(--fehler); font-size: 14px; }
.hinweis { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--cream-dark); font-size: 14px; color: var(--text-dark); }

/* Aufnahme – groß genug für den Daumen */
.aufnahme { margin-top: 16px; text-align: center; }
.aufnahme-knopf {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 72px;
  border-radius: 20px; border: 1px solid var(--charcoal);
  background: var(--charcoal); color: var(--cream);
  font: inherit; font-size: 17px; font-weight: 500; cursor: pointer;
}
.aufnahme-knopf:disabled { opacity: 0.6; cursor: default; }
.aufnahme-punkt { width: 14px; height: 14px; border-radius: 50%; background: var(--gold); }
.aufnahme-knopf.laeuft { background: var(--white); color: var(--charcoal); }
.aufnahme-knopf.laeuft .aufnahme-punkt { background: var(--fehler); animation: puls 1.2s ease-in-out infinite; }
@keyframes puls { 50% { transform: scale(1.35); opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .aufnahme-knopf.laeuft .aufnahme-punkt { animation: none; } }

/* Entwurf */
.entwurf { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--cream-dark); }
.entwurf-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.zaehler { margin: 6px 0 0; font-size: 13px; color: var(--text-light); text-align: right; }
.zaehler-zu-lang { color: var(--fehler); }
.vorschau { margin-top: 12px; padding: 14px; border-radius: 12px; background: var(--white); border: 1px dashed var(--warm-gray-light); }
.vorschau-label { margin: 0 0 6px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-light); }
.vorschau-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-dark); font-size: 14px; }
.vorschau-mehr { color: var(--text-light); }
.aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.aktionen .knopf-ganz { grid-column: 1 / -1; }

/* Listen (Meine Posts) */
.erklaerung { margin: 0 0 8px; }
.abschnitt { margin: 40px 0 12px; }
.neu { margin: 16px 0 24px; }
.neu > summary { list-style: none; }
.neu > summary::-webkit-details-marker { display: none; }
.liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.eintrag { background: var(--white); border: 1px solid var(--cream-dark); border-radius: 16px; padding: 14px 16px; }
.eintrag-inaktiv { opacity: 0.55; }
.eintrag-kopf { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-light); }
.marke { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--cream-dark); color: var(--gold-dark); }
.eintrag-text { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-dark); font-size: 15px; cursor: pointer; }
.eintrag-text-zu { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.eintrag-fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.schalter { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.schalter input { width: 20px; height: 20px; accent-color: var(--gold-dark); }
.eintrag-summary { display: flex; flex-direction: column; gap: 2px; cursor: pointer; list-style: none; }
.eintrag-summary::-webkit-details-marker { display: none; }
.eintrag-datum { font-size: 13px; color: var(--text-light); }
.eintrag-idee { color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leer { color: var(--text-light); font-size: 14px; padding: 8px 0; }
.abmelden { margin-top: 40px; text-align: center; }

/* Tabs am unteren Rand statt Navigationsleiste (Spec 9) */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  height: calc(var(--tab-hoehe) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--charcoal);
}
.tab-knopf { position: relative; font: inherit; font-size: 15px; font-weight: 500; color: var(--warm-gray-light); background: none; border: 0; cursor: pointer; }
.tab-knopf[aria-current="page"] { color: var(--gold); }
.tab-knopf[aria-current="page"]::after { content: ''; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; background: var(--gold); }

/* Login */
.login { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; background: var(--charcoal); }
.login main.login-karte { width: 100%; max-width: 360px; margin: 0; padding: 24px 16px; }
.login h1 { color: var(--cream); margin-bottom: 8px; }
.login .kopf-zeile { color: var(--gold); }
.login .feld-label { color: var(--cream); }