/* ================================
     PlanetCoach – App-Farben
     Primär (Saatfarbe): Grün #2E7D32 | CTA: Orange #FF9800
     Flächen: Hintergrund #F5F7F4 · Cards #FFFFFF · Akzentflächen #FFF3E0
     ================================ */

  :root {
      /* Palette */
      --primary: #2E7D32;
      /* Saatfarbe – Buttons, Icons, Hervorhebungen */
      --cta: #FF9800;
      /* Orange (Basis) – primäre Calls-to-Action */
      --accent: #2E7D32;
      /* Links & sekundäre CTAs */
      --success: #4CAF50;
      /* Grün (Basis) – Badges, Status */

      /* Neutrals & Flächen */
      --bg: #F5F7F4;
      /* App-Hintergrund */
      --bg-2: #FFF3E0;
      /* Orange 50 – sanfte Akzentflächen */
      --surface: #FFFFFF;
      /* erhöhte Fläche */
      --card: #FFFFFF;
      /* Karten */
      --border: #E0E0E0;
      /* Grau 300 – Linien/Trenner */

      /* Typografie */
      --text: #1F2A1F;
      /* Standardtext */
      --muted: #4B5D52;
      /* Subtext */

      /* Sonstiges */
      --shadow: 0 10px 30px rgba(0, 0, 0, .25);
      --radius: 14px;
      --maxw: 1180px;
  }

  * {
      box-sizing: border-box
  }

  html, body {
      margin: 0;
      padding: 0;
      background:
          radial-gradient(1200px 500px at 85% -10%, rgba(255, 152, 0, .12), transparent),
          linear-gradient(140deg, #F5F7F4, #FFF3E0 60%);
      color: var(--text);
      font: 16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  }

  a {
      color: var(--accent);
      text-decoration: none
  }

  a:hover {
      text-decoration: underline
  }

  img {
      max-width: 100%;
      height: auto
  }

  .wrap {
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 24px
  }

  /* Ensure in-page anchors are visible below the sticky header */
  section[id],
  main[id] {
      scroll-margin-top: 120px;
  }

  /* Header / Navigation */
  header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(245, 247, 244, .9);
      backdrop-filter: saturate(120%) blur(10px);
      border-bottom: 1px solid var(--border);
  }

  .nav {
      display: flex;
      align-items: center;
      gap: 20px;
      justify-content: space-between
  }

  .brand {
      display: flex;
      align-items: center;
      gap: 18px
  }

  .brand-title {
      font-size: clamp(22px, 2.6vw, 34px);
      line-height: 1;
      font-weight: 700;
  }

  .brand img {
      height: 75px
  }

  .nav nav {
      display: flex;
      align-items: center;
      gap: 16px;
  }

  .btn {
      background: var(--cta);
      color: #FFFFFF;
      padding: 10px 16px;
      border-radius: 10px;
      font-weight: 700;
      display: inline-block;
  }

  .btn:hover {
      filter: brightness(1.05);
      text-decoration: none;
  }

  .nav a.btn {
      background: var(--cta);
      color: #FFFFFF;
      padding: 10px 16px;
      border-radius: 10px;
      font-weight: 700;
      display: inline-block
  }

  .nav a.btn:hover {
      filter: brightness(1.05)
  }

  @media (max-width:720px) {
      header .wrap {
          padding: 12px 16px;
      }

      .nav {
          flex-direction: column;
          align-items: flex-start;
          gap: 12px;
      }

      .brand img {
          height: 56px;
      }

      .nav nav {
          width: 100%;
          flex-wrap: wrap;
          align-items: flex-start;
          gap: 8px 12px;
      }

      .nav nav a {
          line-height: 1.2;
          padding: 4px 0;
      }

      .nav a.btn {
          width: 100%;
          text-align: center;
          justify-content: center;
      }
  }

  /* Hero */
  .hero {
      display: grid;
      gap: 28px;
      align-items: center;
      padding: 56px 24px
  }

  @media(min-width:880px) {
      .hero {
          grid-template-columns: 1.15fr .85fr;
          gap: 48px;
          padding: 84px 24px
      }
  }

  .tag {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      padding: 6px 10px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--bg-2);
      color: var(--primary);
      font-size: 13px
  }

  h1 {
      font-size: clamp(28px, 4.5vw, 48px);
      line-height: 1.15;
      margin: 10px 0 12px
  }

  p.lead {
      font-size: clamp(16px, 2.2vw, 20px);
      color: var(--muted);
      margin: 0 0 14px
  }

  .cta {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 10px
  }

  .cta a {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      border-radius: 12px;
      font-weight: 700;
      box-shadow: var(--shadow)
  }

  .cta .primary {
      background: var(--cta);
      color: #FFFFFF
  }

  .cta .primary:hover {
      filter: brightness(1.07)
  }

  .cta .ghost {
      border: 1px solid var(--border);
      background: #FFFFFF;
      color: var(--primary)
  }

  .cta .ghost:hover {
      background: #FFF3E0
  }

  .store-badge {
      height: 48px;
      width: auto;
      align-items: center;
      display: inline-block
  }

  @media (max-width:480px) {
      .store-badge {
          height: 40px
      }
  }

  .phone {
      background:
          radial-gradient(1000px 400px at 80% -10%, rgba(46, 125, 50, .1), transparent),
          linear-gradient(180deg, #FFFFFF, #FFF3E0);
      border: 1px solid var(--border);
      border-radius: 28px;
      padding: 14px;
      box-shadow: var(--shadow)
  }

  /* Sections & Cards */
  section {
      padding: 56px 24px;
      border-top: 1px solid var(--border);
      background: linear-gradient(180deg, transparent, var(--bg-2))
  }

  .cards {
      display: grid;
      gap: 18px
  }

  @media(min-width:900px) {
      .cards {
          grid-template-columns: repeat(3, 1fr)
      }
  }

  @media(min-width:900px) {
      .cards.two {
          grid-template-columns: repeat(2, 1fr)
      }
  }

  .card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px
  }

  .card h3 {
      margin: 0 0 6px
  }

  .card h3 .coming-soon {
      font-size: 0.8em;
      font-weight: 400;
      color: var(--muted);
  }

  .list {
      display: grid;
      gap: 10px;
      margin: 10px 0 0;
      padding: 0
  }

  .list li {
      list-style: none;
      display: flex;
      gap: 10px;
      align-items: flex-start
  }

  .list svg {
      flex: 0 0 20px;
      margin-top: 4px;
      color: var(--success)
  }

  .steps {
      display: grid;
      gap: 18px
  }

  @media(min-width:900px) {
      .steps {
          grid-template-columns: repeat(4, 1fr)
      }
  }

  .step {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px
  }

  /* Social Proof */
  .quote {
      display: grid;
      gap: 16px
  }

  @media(min-width:900px) {
      .quote {
          grid-template-columns: 1fr 1fr
      }
  }

  .quote blockquote {
      margin: 0;
      background: #FFF3E0;
      border-left: 4px solid var(--primary);
      padding: 16px;
      border-radius: 10px;
      color: var(--text)
  }

  /* FAQ */
  .faq details {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 12px
  }

  .faq details+details {
      margin-top: 10px
  }

  /* Blog-Teaser */
  .blog {
      display: grid;
      gap: 18px
  }

  @media(min-width:980px) {
      .blog {
          grid-template-columns: repeat(3, 1fr)
      }
  }

  .post {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden
  }

  .post .body {
      padding: 14px
  }

  /* Topic preview list (detail pages) */
  .topic-previews ul {
      list-style: none;
      padding: 0;
      margin: 12px 0 0;
      display: grid;
      gap: 12px
  }

  .topic-preview a {
      display: grid;
      grid-template-columns: 110px 1fr;
      gap: 12px;
      align-items: center;
      text-decoration: none;
      color: inherit
  }

  .topic-preview img {
      width: 100%;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: #FFFFFF
  }

  .topic-preview h3 {
      margin: 0;
      font-size: 16px
  }

  .topic-preview p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 14px
  }

  @media(max-width:640px) {
      .topic-preview a {
          grid-template-columns: 1fr;
          align-items: start
      }
  }

  /* Newsletter */
  form.news {
      display: grid;
      gap: 10px;
      grid-template-columns: 1fr auto;
      margin-top: 14px
  }

  form.news input {
      padding: 12px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: #FFFFFF;
      color: var(--text)
  }

  form.news input:focus {
      outline: 2px solid var(--accent);
      outline-offset: 2px
  }

  form.news button {
      padding: 12px 16px;
      border-radius: 10px;
      border: 0;
      background: var(--cta);
      color: #FFFFFF;
      font-weight: 800
  }

  /* Footer */
  footer {
      padding: 40px 24px;
      background: var(--primary);
      border-top: 1px solid #1B5E20;
      color: #FFFFFF
  }

  footer a {
      color: #FFF3E0;
  }

  footer a:hover {
      color: #FFFFFF;
  }

  .footgrid {
      display: grid;
      gap: 18px
  }

  @media(min-width:900px) {
      .footgrid {
          grid-template-columns: 2fr 1fr 1fr 1fr
      }
  }

  /* Consent Banner */
  .consent-banner {
      position: fixed;
      inset: auto 0 0 0;
      z-index: 60;
      background: rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(6px);
      padding: 12px;
  }

  .consent-content {
      background: #FFFFFF;
      color: var(--text);
      max-width: 960px;
      margin: 0 auto;
      padding: 18px 18px 16px;
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
      border: 1px solid var(--border);
  }

  .consent-content p {
      margin: 0 0 10px;
      font-size: 15px;
  }

  .consent-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin: 10px 0;
  }

  .consent-btn {
      border: none;
      cursor: pointer;
      border-radius: 10px;
      font-weight: 700;
      padding: 10px 14px;
      font-size: 15px;
  }

  .consent-btn.primary {
      background: var(--cta);
      color: #FFFFFF;
  }

  .consent-btn.ghost {
      background: var(--bg);
      color: var(--text);
      border: 1px solid var(--border);
  }

  .consent-btn:focus-visible, .linklike:focus-visible {
      outline: 3px solid #1E88E5;
      outline-offset: 2px;
  }

  .consent-note {
      color: var(--muted);
      font-size: 14px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
  }

  .linklike {
      background: none;
      border: none;
      color: var(--accent);
      cursor: pointer;
      text-decoration: underline;
      padding: 0;
      font: inherit;
  }

  @media(max-width:720px) {
      .consent-content {
          padding: 16px;
      }

      .consent-actions {
          flex-direction: column;
          align-items: stretch;
      }

      .consent-btn {
          width: 100%;
          text-align: center;
      }
  }

  /* Utility */
  .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      border: 0
  }

  .sticky-cta {
      position: fixed;
      right: 16px;
      bottom: 16px;
      background: var(--cta);
      color: #FFFFFF;
      padding: 12px 16px;
      border-radius: 999px;
      font-weight: 800;
      box-shadow: var(--shadow)
  }

  /* Optional: angepasstes Dark Theme bei bevorzugtem Dunkelmodus */
  @media (prefers-color-scheme: dark) {
      :root {
          --bg: #1F2A24;
          --bg-2: #243229;
          --surface: #27382E;
          --card: #243229;
          --text: #E8F5E9;
          --muted: #B7CBB9;
          --border: #355D3F;
      }

      html, body {
          background: linear-gradient(140deg, #1F2A24, #243229 60%)
      }

      header {
          background: rgba(31, 42, 36, .85)
      }

      .tag {
          background: rgba(255, 255, 255, .08);
          color: #CDE5D0
      }

      .cta .ghost {
          background: rgba(39, 56, 46, .9);
          color: #E8F5E9
      }

      .quote blockquote {
          background: #2E3E32;
          color: #E8F5E9
      }

      footer {
          background: #1B2B1F;
          color: #E8F5E9
      }
  }