/* ==========================================================================
   LOVE-CONNECTOR — Design System v1 (Phase 1)
   Struktur adaptiert vom AI-CONNECTOR-Web, Farben auf Weinrot/Rosa
   ========================================================================== */

/* ---------- Design Tokens ---------- */
:root {
  /* Markenfarben — Weinrot mit mehr Sättigung (2026-04-24) */
  --lc-wine:            #8B1A2B;   /* Header-Primär, Stroke, Akzent */
  --lc-wine-hover:      #701521;
  --lc-wine-dark:       #5a1019;
  --lc-wine-soft:       #f5d4d8;

  --lc-rose-light:      #F8D7DA;   /* Logo links, zarte Flächen */
  --lc-rose-dark:       #E58A8A;   /* Logo rechts, sekundärer Akzent */

  /* Neutrale Basis */
  --lc-bg:              #f5f5f5;
  --lc-surface:         #ffffff;
  --lc-surface-alt:     #faf8f9;

  --lc-border:          #e9ecef;
  --lc-border-soft:     #eef1f5;

  --lc-text:            #1a1a1a;
  --lc-text-muted:      #555;
  --lc-text-dim:        #888;
  --lc-text-inverse:    #fff;

  --lc-dark-contact:    #3a2a2d;
  --lc-dark-footer:     #2a1f21;

  --lc-ok:              #28A745;
  --lc-err:             #DC3545;
  --lc-warn:            #FFC107;

  --lc-radius-sm:       6px;
  --lc-radius-md:       10px;
  --lc-radius-lg:       14px;

  --lc-shadow-sm:       0 1px 4px rgba(60,20,25,.08);
  --lc-shadow-md:       0 4px 14px rgba(60,20,25,.10);
  --lc-shadow-lg:       0 10px 30px rgba(60,20,25,.14);

  --header-height:      58px;
  --lc-tap-min:         44px;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--lc-text);
  background: var(--lc-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

img, svg { max-width: 100%; display: block; }

a { color: var(--lc-wine); text-decoration: none; transition: color .15s; }
a:hover { color: var(--lc-wine-hover); }

h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; color: var(--lc-text); letter-spacing: -.01em; }

::selection { background: var(--lc-rose-light); color: var(--lc-wine-dark); }

/* ---------- Header (weinrot, Logo direkt ohne Button-Rahmen) ---------- */
#site-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-height);
  background: var(--lc-wine);
  z-index: 1000;
  display: flex; align-items: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.header-inner { display: flex; align-items: center; width: 100%; padding: 0 18px; gap: 12px; }

.header-brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; height: 44px; padding: 0;
}
.header-brand .logo { width: 40px; height: 40px; flex-shrink: 0; }
.header-brand .brand-text {
  color: #fff; font-size: 20px; font-weight: 700;
  letter-spacing: .5px; white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.header-actions { margin-left: auto; display: flex; gap: 10px; }

.btn-header {
  display: inline-flex; align-items: center;
  min-height: 36px; padding: 0 16px;
  border-radius: var(--lc-radius-sm);
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff; font-size: 13px; font-weight: 500;
  cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s;
  font-family: inherit;
}
.btn-header:hover {
  background: rgba(255,255,255,.28); color: #fff;
  border-color: rgba(255,255,255,.55);
}

@media (max-width: 560px) {
  .header-brand .brand-text { font-size: 16px; }
  .header-brand { gap: 8px; }
  .header-brand .logo { width: 32px; height: 32px; }
  .btn-header { padding: 0 12px; font-size: 12px; min-height: 32px; }
}

/* ---------- Hero (Fullscreen wie AI-CONNECTOR) ---------- */
.hero {
  position: relative; width: 100%;
  min-height: 100vh; min-height: 100svh;
  padding-top: var(--header-height);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg picture, .hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  display: block;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(80,20,30,.35) 0%, rgba(40,10,18,.55) 100%);
  z-index: 1;
}
.hero-content {
  position: relative; z-index: 2;
  text-align: center; color: #fff;
  padding: 100px 20px 80px;
  max-width: 860px; width: 100%;
}
.hero-title {
  font-size: clamp(32px, 6vw, 58px);
  font-weight: 700; letter-spacing: -.01em;
  color: #fff; margin-bottom: 18px;
  text-shadow: 0 2px 24px rgba(0,0,0,.45);
  line-height: 1.1;
}
.hero-subtitle {
  font-size: clamp(17px, 2.3vw, 22px);
  font-weight: 400; margin: 0 auto 36px;
  max-width: 640px; color: rgba(255,255,255,.95);
  text-shadow: 0 2px 16px rgba(0,0,0,.45);
  line-height: 1.5;
}
.hero-cta-row {
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: center; margin-top: 8px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--lc-tap-min);
  padding: 12px 26px;
  border-radius: var(--lc-radius-sm);
  font-family: inherit; font-size: 15px; font-weight: 600;
  letter-spacing: .3px; cursor: pointer; text-decoration: none;
  transition: background .18s, transform .1s, box-shadow .2s, border-color .15s;
  border: 1px solid transparent; line-height: 1;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
  background: var(--lc-wine); color: #fff;
  border-color: var(--lc-wine);
  box-shadow: var(--lc-shadow-sm);
}
.btn-primary:hover {
  background: var(--lc-wine-hover); border-color: var(--lc-wine-hover);
  color: #fff; box-shadow: var(--lc-shadow-md);
}

.btn-secondary {
  background: rgba(255,255,255,.12); color: #fff;
  border-color: rgba(255,255,255,.55);
}
.btn-secondary:hover {
  background: rgba(255,255,255,.22); color: #fff;
  border-color: rgba(255,255,255,.8);
}

.btn-outline {
  background: #fff; color: var(--lc-wine);
  border-color: var(--lc-wine);
}
.btn-outline:hover { background: var(--lc-wine-soft); color: var(--lc-wine-dark); }

.btn-small { min-height: 36px; padding: 8px 16px; font-size: 13px; }
.btn-large { min-height: 52px; padding: 14px 34px; font-size: 17px; }
.btn-block { width: 100%; }

/* ---------- Layout helpers ---------- */
.section { padding: 70px 20px; }
.container { max-width: 1100px; margin: 0 auto; }

.section-light { background: var(--lc-bg); }
.section-surface { background: var(--lc-surface); }

/* ---------- Value-Prop ---------- */
.value-prop { text-align: center; max-width: 780px; margin: 0 auto; }
.value-prop h2 {
  font-size: clamp(26px, 3.6vw, 36px);
  color: var(--lc-wine); margin-bottom: 16px;
}
.value-prop p {
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--lc-text-muted); margin-bottom: 14px;
}

/* ---------- Feature-Grid ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px; margin-top: 44px;
}
.feature-card {
  background: var(--lc-surface);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-md);
  padding: 24px 22px;
  box-shadow: var(--lc-shadow-sm);
  transition: transform .2s, box-shadow .2s;
}
.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--lc-shadow-md);
}
.feature-card h3 { font-size: 17px; color: var(--lc-wine); margin-bottom: 10px; }
.feature-card p { color: var(--lc-text-muted); font-size: 15px; line-height: 1.55; }

/* ---------- Form-Basis (Touch-First, pro Input eigene .form-group) ---------- */
.form { max-width: 520px; margin: 0 auto; }

.form-group { margin-bottom: 18px; display: block; }

.form-group label {
  display: block; color: var(--lc-text);
  font-size: 14px; font-weight: 500;
  margin-bottom: 6px; letter-spacing: .2px;
}
.form-group label .req { color: var(--lc-err); margin-left: 2px; }
.form-group .hint {
  display: block; font-size: 12px;
  color: var(--lc-text-dim); margin-top: 4px;
}

.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px 12px;
  min-height: var(--lc-tap-min);
  background: #fff;
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-sm);
  color: var(--lc-text);
  font-family: inherit; font-size: 15px; line-height: 1.4;
  transition: border-color .15s, box-shadow .15s;
}
.form-group textarea { resize: vertical; min-height: 120px; }

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--lc-wine);
  box-shadow: 0 0 0 3px rgba(139,26,43,.15);
}
.form-group input[aria-invalid="true"],
.form-group textarea[aria-invalid="true"] { border-color: var(--lc-err); }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--lc-text-dim); }

.form-check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; cursor: pointer;
  min-height: var(--lc-tap-min);
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  width: 20px; height: 20px; margin-top: 2px;
  flex-shrink: 0; accent-color: var(--lc-wine);
  cursor: pointer;
}
.form-check-label {
  font-size: 15px; color: var(--lc-text); line-height: 1.45;
}

.form-result {
  margin-top: 16px; padding: 12px 14px;
  border-radius: var(--lc-radius-sm);
  font-size: 14px; display: none;
}
.form-result.ok {
  display: block;
  background: rgba(40,167,69,.1);
  border: 1px solid rgba(40,167,69,.4);
  color: #1d6a33;
}
.form-result.err {
  display: block;
  background: rgba(220,53,69,.1);
  border: 1px solid rgba(220,53,69,.4);
  color: #8a1a26;
}

/* ---------- Sec-Links ---------- */
.sec-links {
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: 8px 22px;
  margin-top: 8px; padding: 0; list-style: none;
}
.sec-links a {
  color: var(--lc-text-muted); font-size: 14px;
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.sec-links a:hover {
  color: var(--lc-wine);
  border-bottom-color: var(--lc-wine);
}

/* ---------- Footer ---------- */
#site-footer {
  background: var(--lc-dark-footer);
  color: rgba(255,255,255,.8);
  padding: 32px 20px 24px;
  margin-top: auto;
}
.footer-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; flex-direction: column;
  gap: 14px; align-items: center; text-align: center;
  font-size: 13px;
}
.footer-inner .copyright {
  color: rgba(255,255,255,.6); letter-spacing: .3px;
}
.footer-inner .sec-links a { color: rgba(255,255,255,.75); }
.footer-inner .sec-links a:hover {
  color: #fff; border-bottom-color: rgba(255,255,255,.7);
}

/* ---------- Prose (Stub-Seiten) ---------- */
.prose {
  background: var(--lc-surface);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-md);
  padding: 36px 40px;
  box-shadow: var(--lc-shadow-sm);
  line-height: 1.7;
  max-width: 780px; margin: 0 auto;
}
.prose h1 { font-size: clamp(26px, 3.4vw, 34px); color: var(--lc-wine); margin-bottom: 18px; }
.prose h2 { font-size: 20px; margin: 28px 0 10px; color: var(--lc-wine); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 17px; margin: 20px 0 8px; color: var(--lc-text); }
.prose p { margin-bottom: 14px; color: var(--lc-text-muted); }
.prose ul { margin: 10px 0 14px 22px; color: var(--lc-text-muted); }
.prose li { margin-bottom: 6px; }

/* ---------- Page-Wrap (Stubs) ---------- */
.page-wrap {
  padding-top: calc(var(--header-height) + 40px);
  padding-bottom: 80px;
  min-height: calc(100vh - 120px);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) { .section { padding: 60px 20px; } }

@media (max-width: 768px) {
  .section { padding: 48px 16px; }
  .hero-content { padding: 90px 18px 60px; }
  .feature-grid { gap: 14px; }
  .prose { padding: 24px 22px; }
}

@media (max-width: 480px) {
  .hero-cta-row .btn { width: 100%; }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0s !important; transition-duration: 0s !important; }
  html { scroll-behavior: auto; }
}


/* Caret-Color: blinkender Text-Cursor global aus, nur in Eingabefeldern aktiv. Markieren/Kopieren bleibt. */
* { caret-color: transparent; }
input, textarea, select, [contenteditable]:not([contenteditable="false"]) { caret-color: auto; }


/* ═══════════════════════════════════════════════════════════════════════════
   Erklär-Zeichen („?“) — includes/hilfe.php + web/scripte/lc-hilfe.js
   ═══════════════════════════════════════════════════════════════════════════
   Kleines rundes Fragezeichen hinter Feldern und Funktionen.

   ── Drei Wege, dasselbe zu öffnen ──
   1. `.lc-hilfe-offen` — gesetzt von `lc-hilfe.js` beim Antippen. **Der Weg,
      der auf dem Telefon zählt:** Safari setzt beim Tippen auf einen Button
      keinen Fokus, `:focus-within` allein greift dort also nicht.
   2. `:focus-within` — Tastatur, und Rückfall falls das Skript ausfällt.
   3. `:hover` — nur bei echter Maus (`hover: hover and pointer: fine`).

   ── Unterschieden wird nach Eingabeart, nicht nach Bildschirmbreite ──
   Ein Tablet im Querformat misst 1024 Pixel und bekäme sonst die Maus-Fassung,
   obwohl dort niemand mit einer Maus arbeitet.

   Die Tippfläche misst **immer** 44 Pixel, obwohl das Zeichen nur 18 gross ist
   (Empfehlung Apple 44, Google 48) — über ein unsichtbares Pseudo-Element. */

.lc-hilfe {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  line-height: 0;
}

.lc-hilfe-zeichen {
  position: relative;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid #b9a8ac;
  border-radius: 50%;
  background: #f3eef0;
  color: #7a6a6e;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  font-family: inherit;
  cursor: help;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;      /* kein Doppeltipp-Zoom auf dem Zeichen */
}

/* Tippfläche 44x44, unsichtbar, mittig über dem Zeichen. */
.lc-hilfe-zeichen::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.lc-hilfe-zeichen:focus-visible,
.lc-hilfe.lc-hilfe-offen .lc-hilfe-zeichen,
.lc-hilfe:focus-within .lc-hilfe-zeichen {
  background: #8B1A2B;
  border-color: #8B1A2B;
  color: #fff;
  outline: none;
}

.lc-hilfe-text {
  position: absolute;
  bottom: calc(100% + 11px);
  left: -8px;
  z-index: 10050;
  width: max-content;
  max-width: 290px;
  padding: 10px 13px;
  border-radius: 7px;
  background: #2b1e22;
  color: #f6f0f1;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(3px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.lc-hilfe-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 13px;
  border: 6px solid transparent;
  border-top-color: #2b1e22;
}

/* Offen: per Skript (zählt auf dem Telefon) oder über die Tastatur. */
.lc-hilfe.lc-hilfe-offen .lc-hilfe-text,
.lc-hilfe:focus-within .lc-hilfe-text {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Nach links ausgerichtet — für Zeichen am rechten Rand. */
.lc-hilfe--links .lc-hilfe-text { left: auto; right: -8px; }
.lc-hilfe--links .lc-hilfe-text::after { left: auto; right: 13px; }

/* Der Knopf zum Zumachen erscheint nur bei Fingerbedienung. */
.lc-hilfe-zu { display: none; }

/* ── Rechner mit Maus: Darüberfahren genügt ──────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .lc-hilfe-zeichen:hover {
    background: #8B1A2B;
    border-color: #8B1A2B;
    color: #fff;
  }
  .lc-hilfe:hover .lc-hilfe-text {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* ── Fingerbedienung: Fenster am unteren Rand ────────────────────────────── */
@media (pointer: coarse), (max-width: 560px) {
  .lc-hilfe-text {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    top: auto;
    width: auto;
    max-width: none;
    padding: 18px 18px 14px;
    border-radius: 12px;
    font-size: 14.5px;
    line-height: 1.55;
    transform: translateY(10px);
    box-shadow: 0 -4px 34px rgba(0, 0, 0, .4);
  }
  .lc-hilfe-text::after { display: none; }

  /* Abgedunkelter Hintergrund als Pseudo-Element — kein zweites Element nötig. */
  .lc-hilfe-text::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(20, 10, 14, .5);
    z-index: -1;
  }

  .lc-hilfe-zu {
    display: block;
    width: 100%;
    margin: 14px 0 0;
    padding: 11px 12px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 8px;
    background: rgba(255, 255, 255, .10);
    color: #f6f0f1;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .lc-hilfe-zu:active { background: rgba(255, 255, 255, .2); }

  /* Auf grossen Tablets nicht über die volle Breite ziehen. */
  @media (min-width: 700px) {
    .lc-hilfe-text {
      left: 50%;
      right: auto;
      transform: translateX(-50%) translateY(10px);
      width: min(560px, calc(100vw - 40px));
    }
    .lc-hilfe.lc-hilfe-offen .lc-hilfe-text,
    .lc-hilfe:focus-within .lc-hilfe-text {
      transform: translateX(-50%) translateY(0);
    }
  }
}

/* Wer Bewegung im Betriebssystem abgestellt hat, bekommt sie auch hier nicht. */
@media (prefers-reduced-motion: reduce) {
  .lc-hilfe-zeichen, .lc-hilfe-text { transition: none; }
}

/* Zusatz neben der Feldbeschriftung, z.B. „(so nennen dich die anderen)“. */
.label-zusatz {
  font-weight: 400;
  font-size: .88em;
  color: #8a787c;
  margin-left: 3px;
}