/* ═══════════════════════════════════════════════════════════════
   SaraIT Consulting GmbH — Unterseiten
   Ergänzungen zu style.css für freelancer.html, erstgespraech.html,
   impressum.html und datenschutz.html. Wird NACH style.css geladen.
   ═══════════════════════════════════════════════════════════════ */

/* ── Navigation: aktiver Seitenlink ────────────────────────── */
.nav-links a.active:not(.btn) { color: var(--text); }
.nav-links a.active:not(.btn)::after { width: 100%; }

/* ── Freelancer-Seite: Farbkombinationen je Sektion ────────── */
#fl-hero .grad-text                                    { background-image: var(--g-lime-cyan); }
#wege .grad-text,       #wege .section-label           { background-image: var(--g-cyan-blue); }
#vorteile .grad-text,   #vorteile .section-label       { background-image: var(--g-blue-magenta); }
#projekte .grad-text,   #projekte .section-label       { background-image: var(--g-green-lime); }
#fl-ablauf .grad-text,  #fl-ablauf .section-label      { background-image: var(--g-magenta-orange); }
#profil .grad-text,     #profil .section-label         { background-image: var(--g-trio-fresh); }
#fl-faq .grad-text,     #fl-faq .section-label         { background-image: var(--g-orange-yellow); }

/* ── AGG-Fußnote (m/w/d) unter Hero und Projektarten ───────── */
.agg-note {
  margin-top: 28px; color: var(--muted-2); font-size: 0.8rem; line-height: 1.4;
}
.fl-hero .agg-note { position: relative; z-index: 2; margin-top: 44px; }

/* ── Freelancer: zwei Wege ─────────────────────────────────── */
.wege-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 52px; }
.wege-grid .card.weg { display: flex; flex-direction: column; }
.wege-grid .card.weg > p:not(.weg-fit) { flex: 1; }
.weg-fit {
  margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--dash);
  color: var(--muted); font-size: 0.9rem !important; line-height: 1.5;
}
.weg-fit b { color: var(--text); font-weight: 600; }
.wege-note {
  margin-top: 30px; padding: 16px 20px; border-radius: 14px;
  background: var(--tint); border: 1px solid var(--line);
}
.wege-note p {
  margin: 0; display: flex; gap: 12px; align-items: flex-start;
  color: var(--muted); font-size: 0.95rem; max-width: none;
}
.wege-note p svg {
  width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--fg-green);
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Freelancer: Hero ──────────────────────────────────────── */
.fl-hero .b1 { background: var(--blob-fl-1); }
.fl-hero .b3 { background: var(--blob-fl-3); }
.fl-hero .hero-sub { margin: 24px 0 14px; }
.fl-hero .lp-checks { margin: 0; }
.fl-hero .hero-actions { margin-top: 28px; }
.fl-hero .hero-frame {
  box-shadow: var(--shadow-frame), 0 0 70px rgba(166, 200, 62, 0.14);
}
.fl-hero .hero-frame .frame-glow {
  background: linear-gradient(210deg, rgba(166, 200, 62, 0.16), transparent 45%, rgba(20, 168, 200, 0.16));
}
.fl-hero .fc1 { top: -34px; right: -28px; }
/* Untere Karte haengt an der Rahmenkante, damit die Box "Ihre Daten bleiben bei uns" im Mockup lesbar bleibt */
.fl-hero .fc3 { bottom: -50px; right: auto; left: -46px; }

/* ── Freelancer: Vorteile (5 Karten, 3 + 2) ────────────────── */
.benefit-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; margin-top: 52px; }
.benefit-grid .card { grid-column: span 2; }
.benefit-grid .card:nth-child(4), .benefit-grid .card:nth-child(5) { grid-column: span 3; }

/* ── Freelancer: Projektarten ──────────────────────────────── */
.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.proj-chip {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 20px 22px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, background 0.3s, border-color 0.3s;
}
.proj-chip:hover { transform: translateY(-4px); background: var(--card-hover); border-color: rgba(166, 200, 62, 0.45); }
.proj-chip i {
  flex: none; width: 14px; height: 16px; margin-top: 5px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--g-cyan-blue);
}
.proj-chip:nth-child(2) i { background: var(--g-blue-magenta); }
.proj-chip:nth-child(3) i { background: var(--g-magenta-orange); }
.proj-chip:nth-child(4) i { background: var(--g-lime-cyan); }
.proj-chip:nth-child(5) i { background: var(--g-orange-yellow); }
.proj-chip:nth-child(6) i { background: var(--g-green-lime); }
.proj-chip b { display: block; font-family: var(--font-head); font-size: 1rem; margin-bottom: 3px; }
.proj-chip span { color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.proj-cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.proj-cta p { color: var(--muted); font-size: 0.95rem; }

/* ── Freelancer: Profil-Formular ───────────────────────────── */
.profil-grid { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
.profil-grid h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.profil-steps { margin-top: 30px; display: grid; gap: 12px; }
.profil-steps > div {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 18px; border-radius: 14px;
  background: var(--tint); border: 1px solid var(--line);
}
.profil-steps > div > div { flex: 1; min-width: 0; }
.profil-steps i {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-style: normal; font-family: var(--font-head); font-weight: 700; font-size: 0.8rem;
  background: rgba(36, 168, 116, 0.16); border: 1px solid rgba(36, 168, 116, 0.45); color: var(--fg-green);
}
.profil-steps b { display: block; font-family: var(--font-head); font-size: 0.95rem; }
.profil-steps span { color: var(--muted); font-size: 0.86rem; line-height: 1.45; }
.contact-form .form-check { color: var(--muted); line-height: 1.5; }
.contact-form .form-check > span { display: block; }
.contact-form .form-check a { color: var(--fg-cyan); text-decoration: underline; }
.contact-form .form-check input[type="checkbox"] { border-radius: 4px; cursor: pointer; }
.file-name { display: block; color: var(--fg-cyan); font-size: 0.8rem; min-height: 1.2em; }
.file-name:empty { display: none; }
.contact-form input[type="file"]::file-selector-button {
  margin-right: 14px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--tint); color: var(--text); font-family: var(--font-head); font-weight: 600; font-size: 0.82rem;
  cursor: pointer; transition: background 0.25s;
}
.contact-form input[type="file"]::file-selector-button:hover { background: var(--tint-hover); }

/* ── Landingpage (erstgespraech.html) ──────────────────────── */
.lp-hero .grad-text                                    { background-image: var(--g-trio-cool); }
.lp-ceo .grad-text,       .lp-ceo .section-label       { background-image: var(--g-blue-magenta); }
#lp-wege .grad-text,      #lp-wege .section-label      { background-image: var(--g-cyan-blue); }
#lp-faq .grad-text,       #lp-faq .section-label       { background-image: var(--g-green-lime); }
.lp-final .grad-text                                   { background-image: var(--g-magenta-orange); }

.lp-hero .hero-copy { padding-top: 10px; }
.lp-hero .hero-sub { margin: 22px 0 14px; }
.lp-hero .hero-stats { margin-top: 32px; }
.lp-form-wrap .contact-form { gap: 14px; }
.lp-form h2 { margin-bottom: 0; }
.lp-ceo-frame { max-width: 420px; }
.lp-ceo .gf-photo { display: flex; justify-content: center; }
.lp-ceo .gf-sig { margin-top: 26px; }
.card.pain .promise { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--dash); }
.lp-final h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.lp-final .hero-actions .btn svg { flex: none; }

.lp-footer .footer-grid { grid-template-columns: 1.6fr 1fr; align-items: start; }
.lp-footer .footer-legal { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }

/* ── Rechtsseiten (impressum.html, datenschutz.html) ───────── */
.legal .legal-label {
  font-family: var(--font-head); font-weight: 600; font-size: 0.82rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  background: var(--g-cyan-blue); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 12px;
}
.legal h1 { margin-bottom: 18px; }
.legal .legal-lead { color: var(--text); font-size: 1.05rem; margin-bottom: 8px; }
.legal p + p, .legal ul + p, .legal p + ul { margin-top: 12px; }
.legal ul { list-style: disc; margin: 10px 0 10px 22px; }
.legal li { margin-bottom: 6px; }
.legal h2 { padding-top: 6px; }
.legal h2:first-of-type { margin-top: 28px; }
.legal address { font-style: normal; color: var(--muted); line-height: 1.75; font-size: 0.97rem; }
.legal address b { color: var(--text); font-weight: 600; }
.legal .legal-box p, .legal .legal-box address { margin: 0; }
.legal .legal-box p + p { margin-top: 8px; }
.legal a[data-clink] { color: var(--fg-cyan); text-decoration: underline; text-underline-offset: 3px; }
.legal a[href^="http"] { overflow-wrap: anywhere; }
.legal .stand { margin-top: 44px; font-size: 0.86rem; color: var(--muted-2); }
.legal .toc {
  list-style: none; margin: 18px 0 0; padding: 18px 22px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-card);
  columns: 2; column-gap: 28px;
}
.legal .toc li { margin: 0 0 4px; font-size: 0.9rem; break-inside: avoid; }
.legal .toc a { color: var(--muted); text-decoration: none; }
.legal .toc a:hover { color: var(--fg-cyan); }

/* Platzhalter fuer Entwuerfe: gelbe Markierung und Hinweisbox am Seitenende.
   Beides wird derzeit nicht verwendet, die Rechtstexte sind vollstaendig.
   Die Regeln bleiben stehen, damit kuenftige Entwuerfe (etwa bei der
   Umstellung auf eine GmbH) wieder darauf zurueckgreifen koennen. */
mark.todo {
  background: var(--c-yellow); color: #0b0d14;
  padding: 2px 7px; border-radius: 6px;
  font-weight: 600; font-style: normal;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.legal .todo-note {
  margin-top: 28px; padding: 16px 20px; border-radius: 14px;
  background: var(--todo-bg); border: 1px dashed var(--todo-line);
  font-size: 0.88rem; color: var(--muted);
}
.legal .todo-note b { color: var(--text); }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .profil-grid { grid-template-columns: 1fr; }
  .lp-footer .footer-grid { grid-template-columns: 1fr 1fr; }
  .fl-hero .fc1 { right: -10px; }
  .fl-hero .fc3 { left: -10px; }
  .lp-ceo-frame { max-width: 380px; }
}

@media (max-width: 900px) {
  .benefit-grid { grid-template-columns: 1fr 1fr; }
  .benefit-grid .card, .benefit-grid .card:nth-child(4), .benefit-grid .card:nth-child(5) { grid-column: span 1; }
  .benefit-grid .card:nth-child(5) { grid-column: span 2; }
  .proj-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .benefit-grid, .proj-grid, .wege-grid { grid-template-columns: 1fr; }
  .fl-hero .agg-note { margin-top: 56px; }
  .benefit-grid .card:nth-child(5) { grid-column: span 1; }
  /* Schmale Viewports: nur eine Float-Card, damit das Hero-Visual sichtbar bleibt.
     Die Aussage von fc1 (Satz und Anteil vorab) steht bereits in der Checkliste. */
  .fl-hero .fc1 { display: none; }
  .fl-hero .fc3 { display: flex; bottom: -22px; left: auto; right: 8px; max-width: 250px; }
  .proj-cta .btn { width: 100%; }
  .lp-footer .footer-grid { grid-template-columns: 1fr; }
  .legal .toc { columns: 1; }
  .lp-form-wrap { padding: 22px 18px; }
  .lp-hero { padding-bottom: 60px; }
  .lp-ceo-frame { max-width: 320px; }
}

/* ── Nachbesserungen (Prüfbericht) ─────────────────────────── */

/* Erstgespräch, Block „Ihr Gesprächspartner“: Luft zwischen Zitat-Absender
   und Buttonreihe, wie auf der Startseite (#gf .hero-actions). */
.lp-ceo .hero-actions { margin-top: 28px; }
/* Technische Leitung unterhalb der Signatur des Geschäftsführers, bewusst klein */
.gf-cto { margin-top: 14px; padding-left: 18px; color: var(--muted); font-size: 0.88rem; }
/* AGG-Fußnote unter den Hero-Kennzahlen der Landingpage */
.lp-hero .agg-note { position: relative; z-index: 2; margin-top: 30px; }

/* Inline-Links in den Rechtstexten sind unterstrichen (WCAG 1.4.1).
   Die Sprungmarken im Inhaltsverzeichnis bleiben ohne Unterstreichung. */
.legal p a, .legal li a, .legal address a, .legal .legal-box a {
  text-decoration: underline; text-underline-offset: 3px;
}
.legal .toc a { text-decoration: none; }

/* Kopfzeile der Rechtsseiten auf schmalen Viewports:
   Beschriftung kürzt sich auf „Startseite“, damit sie nicht umbricht. */
@media (max-width: 560px) {
  .lp-nav .nav-inner { width: min(1200px, 94vw); gap: 10px; }
  .lp-nav .nav-side .btn-small { padding: 9px 14px; font-size: 0.82rem; white-space: nowrap; }
  .nb-long { display: none; }
}