/*
Theme Name: neuroimpuls
Theme URI: https://neuro-im-puls.de
Author: Dr. Anne Lieb / synct
Description: Schlankes Theme für die Praxis-/Forschungsseite Dr. med. Anne Lieb. Single-Page-Design, Inhalte über ACF + CPT „Angebot".
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: neuroimpuls
*/

@font-face{font-family:'Mulish';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/mulish-400.woff2') format('woff2');}
@font-face{font-family:'Mulish';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/mulish-500.woff2') format('woff2');}
@font-face{font-family:'Mulish';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/mulish-600.woff2') format('woff2');}
@font-face{font-family:'Mulish';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/mulish-700.woff2') format('woff2');}
@font-face{font-family:'Carlito';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/carlito-400.woff2') format('woff2');}
@font-face{font-family:'Carlito';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/carlito-700.woff2') format('woff2');}

/* ============================================================
       neuroimpuls – Dr. med. Anne Lieb
       Farbwelt "Rehab2Home-warm" · warm · hoffnungsvoll · weich
       ============================================================ */

    :root {
      --cream:      #F2F7EF;   /* helles Warmweiß mit zartem Teal-Hauch (statt Graustich) */
      --sand:       #E7F0E2;   /* sanftes Teal-Weiß für ruhige Sektionen */
      --card:       #FFFFFF;

      --coral:      #5E9150;   /* Leitfarbe – freundliches Hellgrün (CTA, Logo, Akzente) */
      --coral-dark: #4C7A3E;   /* Grün dunkel – Text & Hover */
      --honey:      #E8A94E;

      --petrol:     #4F7E8C;
      --sage:       #9FB28D;
      --rose:       #CD9385;

      --ink:        #3A332B;   /* warmes Anthrazit */
      --text:       #564E44;
      --muted:      #8B7F6C;
      --border:     #E7DBC4;

      --font-display: 'Calibri', 'Carlito', 'Segoe UI', system-ui, sans-serif;
      --font-main:    'Mulish', 'Segoe UI', system-ui, Arial, sans-serif;
      --max-width:    1000px;
      --radius:       18px;
      --radius-sm:    12px;
      --shadow:       0 10px 34px rgba(59,52,45,0.09);
      --shadow-soft:  0 4px 18px rgba(59,52,45,0.06);
      --gradient:     linear-gradient(90deg, #5E9150 0%, #4F8FA0 32%, #E8A94E 62%, #E08544 90%);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-main);
      font-size: 18px;
      font-weight: 400;
      line-height: 1.75;
      color: var(--text);
      background: var(--cream);
      -webkit-font-smoothing: antialiased;
    }

    /* ── WORTMARKE / LOGO ── */
    .brand-lockup { display: flex; align-items: center; gap: 14px; }
    .brand-mark {
      width: 52px;
      height: 52px;
      flex-shrink: 0;
      display: block;
      filter: drop-shadow(0 4px 10px rgba(94,145,80,0.22));
    }
    .brand-mark .ring { fill: var(--card); stroke: var(--border); stroke-width: 1.5; }
    .brand-text { line-height: 1; }
    .brand-name {
      font-family: var(--font-main);
      font-size: 1.92rem;
      font-weight: 600;
      letter-spacing: -0.015em;
      color: var(--ink);
      line-height: 1;
    }
    .brand-name b { font-weight: 600; }
    .brand-name .bn-im {                        /* "im" – Verlauf Grün → Teal */
      background: linear-gradient(90deg, #7FB85E 0%, #4F8FA0 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: #4F8FA0;
    }
    .brand-name .bn-puls {                      /* "puls" – Verlauf Gold → Orange */
      background: linear-gradient(90deg, #E8A94E 0%, #E08544 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: #E08544;
    }
    .header-text .subtitle {
      font-size: 0.8rem;
      color: var(--muted);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-top: 7px;
      font-weight: 500;
    }

    /* ── HEADER ── */
    header {
      background: var(--card);
      color: var(--ink);
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 2px 18px rgba(59,52,45,0.06);
    }
    .header-inner {
      max-width: var(--max-width);
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 18px 28px 14px;
    }
    nav {
      display: flex;
      gap: 4px;
      justify-content: center;
      flex-wrap: nowrap;
      padding: 0 16px;
      overflow-x: auto;
      background: linear-gradient(90deg, #FBEFDD 0%, #F8E7D2 100%);
      scrollbar-width: none;
    }
    nav::-webkit-scrollbar { display: none; }
    nav a {
      color: var(--ink);
      text-decoration: none;
      padding: 14px 22px;
      font-size: 0.95rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
      white-space: nowrap;
      border-bottom: 3px solid transparent;
    }
    nav a:hover, nav a.active {
      background: rgba(94,145,80,0.12);
      color: var(--coral-dark);
      border-bottom-color: var(--coral);
    }
    .brand-stripe { height: 5px; width: 100%; background: var(--gradient); }

    /* ── HERO ── */
    .hero {
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(38deg,
          var(--cream) 0%,
          var(--cream) 46%,
          #E2F0EE 62%,
          #C2E2E2 76%,
          #97D0D2 88%,
          #6FBEC4 100%);
      padding: 72px 28px 76px;
    }
    .hero-grid {
      max-width: var(--max-width);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 52px;
      align-items: center;
    }
    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: rgba(255,253,248,0.8);
      border: 1px solid var(--border);
      color: #3C6675;
      padding: 7px 16px 7px 12px;
      border-radius: 999px;
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      margin-bottom: 22px;
      box-shadow: var(--shadow-soft);
    }
    .hero-eyebrow svg { width: 18px; height: 18px; }
    .hero h2 {
      font-family: var(--font-display);
      font-size: 3.2rem;
      font-weight: 700;
      margin-bottom: 22px;
      line-height: 1.08;
      color: var(--ink);
      letter-spacing: -0.005em;
      text-wrap: balance;
    }
    .hero p { font-size: 1.18rem; color: var(--text); margin-bottom: 34px; line-height: 1.75; max-width: 30em; }

    /* Hero-Bildfläche */
    .hero-figure {
      position: relative;
      border-radius: 26px;
      overflow: hidden;
      aspect-ratio: 1375 / 1597;
      background:
        linear-gradient(150deg, rgba(255,253,248,0.55), rgba(255,253,248,0) 60%),
        linear-gradient(160deg, #F2D9A6 0%, #E8B873 45%, #CBB089 100%);
      box-shadow: 0 18px 44px rgba(216,166,90,0.20);
      border: 6px solid var(--card);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .hero-figure .glow {
      position: absolute; inset: 0;
      background: radial-gradient(70% 55% at 30% 22%, rgba(255,247,230,0.65) 0%, rgba(255,247,230,0) 60%);
      pointer-events: none;
    }
    .hero-figure .hero-photo {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      display: block;
    }
    .hero-figure .photo-note {
      position: relative;
      z-index: 2;
      text-align: center;
      color: rgba(52,68,36,0.82);
      font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
      font-size: 0.78rem;
      letter-spacing: 0.02em;
      line-height: 1.6;
      padding: 22px;
      max-width: 86%;
    }
    .hero-figure .photo-note svg { width: 40px; height: 40px; opacity: 0.8; margin-bottom: 12px; }
    .hero-figure .photo-note .tag {
      display: inline-block;
      margin-top: 12px;
      padding: 4px 12px;
      border-radius: 999px;
      background: rgba(255,253,248,0.55);
      border: 1px dashed rgba(52,68,36,0.4);
      font-size: 0.72rem;
    }
    .hero-figure::after {
      content: "";
      position: absolute;
      inset: 14px;
      border: 1.5px solid rgba(255,253,248,0.45);
      border-radius: 18px;
      pointer-events: none;
    }

    /* ── BUTTONS ── */
    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      background: var(--coral);
      color: #fff;
      padding: 15px 32px;
      border-radius: 999px;
      text-decoration: none;
      font-weight: 600;
      font-size: 1.05rem;
      letter-spacing: 0.01em;
      transition: background 0.2s, transform 0.12s, box-shadow 0.2s;
      border: none;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(94,145,80,0.34);
    }
    .btn-primary svg { width: 20px; height: 20px; }
    .btn-primary:hover {
      background: var(--coral-dark);
      transform: translateY(-2px);
      box-shadow: 0 12px 26px rgba(94,145,80,0.42);
    }
    .btn-large { padding: 17px 42px; font-size: 1.1rem; }

    /* ── SECTIONS ── */
    .section { padding: 72px 28px; }
    .section-alt { background: var(--sand); }
    .container { max-width: var(--max-width); margin: 0 auto; }
    .section-head { text-align: center; max-width: 720px; margin: 0 auto 8px; }
    .section-title {
      font-family: var(--font-display);
      font-size: 2.5rem;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 16px;
      line-height: 1.12;
      letter-spacing: -0.005em;
    }
    .section-title-rule {
      width: 64px; height: 4px; border-radius: 999px;
      background: var(--gradient);
      margin: 0 auto 22px;
    }
    .section-intro {
      text-align: center;
      color: var(--muted);
      max-width: 700px;
      margin: 0 auto;
      font-size: 1.12rem;
      line-height: 1.7;
    }

    /* ── ANGEBOTS-KARTEN ── */
    .offers { display: flex; flex-direction: column; gap: 28px; margin-top: 8px; }
    .card-section {
      display: flex;
      gap: 30px;
      align-items: flex-start;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 38px;
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
      transition: transform 0.18s, box-shadow 0.18s;
    }
    .card-section::before {
      content: "";
      position: absolute; left: 0; top: 0; bottom: 0;
      width: 6px;
      background: var(--accent, var(--coral));
    }
    .card-section:hover {
      transform: translateY(-3px);
      box-shadow: 0 16px 42px rgba(59,52,45,0.13);
    }
    .card-icon {
      min-width: 76px;
      width: 76px;
      height: 76px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--accent-soft, rgba(94,145,80,0.14));
      color: var(--accent, var(--coral));
      border-radius: 22px;
      flex-shrink: 0;
    }
    .card-icon svg { width: 40px; height: 40px; }
    .card-body { flex: 1; }
    .card-body h3 {
      font-family: var(--font-display);
      font-size: 1.78rem;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 14px;
      line-height: 1.18;
    }
    .card-body p { margin-bottom: 14px; color: var(--text); }
    .card-body ul { margin: 0 0 16px 4px; color: var(--text); list-style: none; }
    .card-body ul li {
      margin-bottom: 9px;
      padding-left: 28px;
      position: relative;
    }
    .card-body ul li::before {
      content: "";
      position: absolute;
      left: 2px; top: 11px;
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--accent, var(--coral));
    }

    /* ── BADGES ── */
    .badge {
      display: inline-block;
      padding: 5px 15px;
      border-radius: 999px;
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      margin-bottom: 16px;
      background: var(--petrol);
      color: #fff;
    }
    .badge-green  { background: var(--sage); color: #2E3A24; }
    .badge-orange { background: var(--honey); color: #4A3410; }
    .badge-purple { background: var(--rose); color: #4A2C26; }

    /* ── KONTAKTFORMULAR ── */
    .section-form { background: var(--sand); }
    .contact-form {
      background: var(--card);
      padding: 44px;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      margin: 40px auto 0;
      max-width: 720px;
      border: 1px solid var(--border);
    }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
    .form-group { margin-bottom: 24px; }
    .form-group label {
      display: block;
      font-weight: 600;
      margin-bottom: 9px;
      color: var(--ink);
      font-size: 1rem;
    }
    .required { color: var(--coral); }
    .optional { color: var(--muted); font-size: 0.82rem; font-weight: 400; }
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="tel"],
    .form-group textarea {
      width: 100%;
      padding: 14px 16px;
      border: 1.5px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 1.05rem;
      font-family: var(--font-main);
      transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
      background: var(--cream);
      color: var(--text);
    }
    .form-group input:focus, .form-group textarea:focus {
      outline: none;
      border-color: var(--coral);
      background: #fff;
      box-shadow: 0 0 0 4px rgba(94,145,80,0.16);
    }
    .form-group textarea { resize: vertical; min-height: 120px; }
    .checkbox-group { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
    .checkbox-label {
      display: flex;
      align-items: center;
      gap: 13px;
      cursor: pointer;
      font-weight: 500;
      color: var(--text);
      padding: 13px 16px;
      border: 1.5px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--cream);
      transition: border-color 0.18s, background 0.18s;
    }
    .checkbox-label:hover { border-color: var(--coral); background: #fff; }
    .checkbox-label input[type="checkbox"] {
      width: 20px;
      height: 20px;
      accent-color: var(--coral);
      cursor: pointer;
      flex-shrink: 0;
    }
    .checkbox-label .opt-icon {
      width: 24px; height: 24px;
      flex-shrink: 0;
      color: var(--coral);
      display: inline-flex;
    }
    .checkbox-label .opt-icon svg { width: 24px; height: 24px; }
    .consent-group {
      background: var(--cream);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 18px 20px;
    }
    .consent-group .checkbox-label {
      align-items: flex-start;
      border: none;
      background: none;
      padding: 0;
    }
    .consent-group .checkbox-label:hover { background: none; }
    .consent-group input[type="checkbox"] { margin-top: 3px; }
    .consent-label { font-size: 0.92rem; line-height: 1.6; color: var(--muted); font-weight: 400; }
    .consent-label strong { color: var(--text); }
    .form-submit { text-align: center; margin-top: 10px; }
    .form-submit .btn-primary { justify-content: center; }
    .form-message { margin-top: 22px; padding: 16px 20px; border-radius: var(--radius-sm); font-size: 1rem; text-align: center; }
    .form-message.success { background: #EAF1E2; border: 1px solid var(--sage); color: #34461F; }
    .form-message.error { background: #FBE7DD; border: 1px solid #D98E6E; color: #8A3A1C; }
    .form-message a { color: var(--coral-dark); }

    /* ── ÜBER MICH ── */
    .section-about { background: var(--card); }
    .section-about p { max-width: 740px; margin: 0 auto 18px; text-align: center; color: var(--text); font-size: 1.1rem; }
    .contact-info { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; margin-top: 40px; }
    .contact-item {
      background: var(--cream);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 24px 28px;
      min-width: 220px;
      text-align: center;
      box-shadow: var(--shadow-soft);
    }
    .contact-item .ci-icon {
      width: 40px; height: 40px;
      margin: 0 auto 12px;
      color: var(--coral);
      display: flex; align-items: center; justify-content: center;
    }
    .contact-item .ci-icon svg { width: 28px; height: 28px; }
    .contact-item strong {
      display: block;
      color: var(--coral-dark);
      font-size: 0.74rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 6px;
    }
    .contact-item span, .contact-item a { color: var(--text); font-size: 1rem; text-decoration: none; }
    .contact-item a:hover { text-decoration: underline; }

    /* ── FOOTER ── */
    footer {
      background: var(--ink);
      color: rgba(248,242,232,0.72);
      padding: 40px 28px;
      text-align: center;
      font-size: 0.9rem;
    }
    .footer-mark { width: 40px; height: 40px; margin: 0 auto 14px; display: block; opacity: 0.92; }
    .footer-inner p { margin-bottom: 8px; }
    footer a { color: rgba(248,242,232,0.9); text-decoration: none; transition: color 0.2s; }
    footer a:hover { color: var(--honey); }

    /* ── LEGAL ── */
    .legal-section { padding: 56px 28px; background: var(--sand); border-top: 1px solid var(--border); }
    .legal-section h3 { font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); margin-bottom: 18px; }
    .legal-section p { max-width: 760px; margin-bottom: 13px; font-size: 0.92rem; color: var(--muted); line-height: 1.7; }
    .legal-section em { display: block; margin-top: 14px; color: var(--coral-dark); font-style: italic; }
    .legal-section a { color: var(--petrol); }

    /* ── RESPONSIVE ── */
    @media (max-width: 880px) {
      .hero-grid { grid-template-columns: 1fr; gap: 38px; }
      .hero { text-align: center; padding: 56px 22px 60px; }
      .hero p { margin-left: auto; margin-right: auto; }
      .hero-figure { aspect-ratio: 1375 / 1597; max-width: 420px; margin: 0 auto; width: 100%; }
    }
    @media (max-width: 640px) {
      body { font-size: 17px; }
      .header-inner { justify-content: center; text-align: center; padding: 16px 16px 12px; }
      .brand-lockup { justify-content: center; }
      .brand-name { font-size: 1.7rem; }
      .hero h2 { font-size: 2.25rem; }
      .hero { padding: 44px 18px 48px; }
      .section { padding: 52px 18px; }
      .section-title { font-size: 2rem; }
      .card-section { flex-direction: column; gap: 18px; padding: 26px 22px; }
      .card-icon { width: 64px; height: 64px; min-width: 64px; }
      .card-icon svg { width: 34px; height: 34px; }
      .card-body h3 { font-size: 1.5rem; }
      .form-row { grid-template-columns: 1fr; }
      .contact-form { padding: 26px 20px; }
      nav a { padding: 13px 16px; font-size: 0.9rem; }
    }