/* Basislayout mit sanfter Farbgebung und iOS‑Anmutung */
    body {
      margin: 0;
      padding: 0;
      font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
      background: linear-gradient(180deg, #F3F3F8 0%, #E8E9EF 100%);
      color: #1C1C1E;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
    }
    header {
      text-align: center;
      margin-top: 24px;
      margin-bottom: 16px;
    }
    /* Logo-Container für bessere Einbindung des Logos */
    .logo-container {
      display: inline-block;
      background: #FFFFFF;
      padding: 16px;
      border-radius: 20px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }
    .logo-container img {
      display: block;
      width: 260px;
      max-width: 100%;
      height: auto;
    }
    /* Vertrauensbanner */
    .trust-banner {
      display: flex;
      align-items: center;
      background: #F7F7FA;
      border: 1px solid #E5E5EA;
      border-radius: 16px;
      padding: 16px;
      max-width: 720px;
      width: 90%;
      margin-bottom: 16px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    }
    .trust-banner .icon {
      font-size: 28px;
      margin-right: 12px;
    }
    .trust-banner .text {
      font-size: 14px;
      color: #3A3A3C;
      line-height: 1.4;
    }
    /* Karte für Formular und Ergebnisse */
    .card {
      background: #FFFFFF;
      border-radius: 24px;
      /* Intensiverer Schatten für einen hochwertigen Look */
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
      width: 100%;
      max-width: 720px;
      padding: 40px;
      box-sizing: border-box;
      margin-bottom: 32px;
    }
    h1 {
      margin: 0 0 10px 0;
      font-size: 30px;
      font-weight: 700;
      text-align: center;
    }
    p.description {
      text-align: center;
      margin: 0 0 24px 0;
      color: #6C6C70;
      font-size: 15px;
    }
    fieldset {
      border: none;
      padding: 0;
      margin: 0 0 24px 0;
    }
    legend {
      font-weight: 700;
      margin-bottom: 12px;
      font-size: 18px;
      color: #1C1C1E;
    }
    .field {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }
    .field label {
      flex: 0 0 200px;
      margin-right: 8px;
      font-weight: 600;
      color: #1C1C1E;
      display: flex;
      align-items: center;
      font-size: 16px;
    }
    .field .emoji {
      margin-right: 6px;
      font-size: 20px;
    }
    .field input[type="time"],
    .field select {
      flex: 1 1 auto;
      padding: 12px 14px;
      background: #F2F2F7;
      border: 1px solid #D1D1D6;
      border-radius: 12px;
      font-size: 16px;
      color: #1C1C1E;
      box-sizing: border-box;
      appearance: none;
      -webkit-appearance: none;
    }
    .field input[type="time"]::-webkit-inner-spin-button,
    .field input[type="time"]::-webkit-calendar-picker-indicator {
      display: none;
    }
    /* iOS‑Schalter */
    .field input[type="checkbox"] {
      -webkit-appearance: none;
      appearance: none;
      width: 50px;
      height: 30px;
      background: #D1D1D6;
      border-radius: 15px;
      position: relative;
      outline: none;
      cursor: pointer;
      transition: background 0.2s ease;
    }
    .field input[type="checkbox"]::before {
      content: '';
      position: absolute;
      width: 24px;
      height: 24px;
      top: 3px;
      left: 3px;
      background: #FFFFFF;
      border-radius: 50%;
      transition: transform 0.2s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }
    .field input[type="checkbox"]:checked {
      background: #34C759;
    }
    .field input[type="checkbox"]:checked::before {
      transform: translateX(20px);
    }
    .submit-btn {
      display: block;
      width: 100%;
      padding: 16px 0;
      background: linear-gradient(90deg, #007AFF 0%, #00C7FF 100%);
      color: #FFFFFF;
      border: none;
      border-radius: 18px;
      font-size: 18px;
      font-weight: 700;
      text-align: center;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      transition: transform 0.1s ease, filter 0.2s ease;
      margin-top: 14px;
    }
    .submit-btn:hover {
      filter: brightness(0.95);
    }
    .submit-btn:active {
      transform: scale(0.98);
    }
    .results {
      margin-top: 32px;
    }
    .lever-card {
      background: linear-gradient(90deg, #E5F3FF 0%, #F4F9FF 100%);
      padding: 24px;
      border-radius: 18px;
      border-left: 6px solid #007AFF;
      margin-bottom: 28px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }
    .lever-card h3 {
      margin: 0 0 10px 0;
      font-size: 22px;
      font-weight: 700;
      color: #007AFF;
    }
    .lever-card p {
      margin: 0;
      font-size: 16px;
      color: #2A2A2E;
    }
    .result-card {
      background: #FFFFFF;
      padding: 20px;
      border-radius: 16px;
      margin-bottom: 20px;
      border: 1px solid #E5E5EA;
      box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    }
    .result-card h4 {
      margin: 0 0 8px 0;
      font-size: 18px;
      font-weight: 700;
      color: #007AFF;
    }
    .result-card p {
      margin: 6px 0;
      color: #404040;
      font-size: 15px;
    }
    .recommendations {
      margin-top: 28px;
    }
    .recommendations h3 {
      margin: 0 0 12px 0;
      font-size: 20px;
      font-weight: 700;
    }
    .product-card {
      display: flex;
      align-items: flex-start;
      background: #FFFFFF;
      border: 1px solid #E5E5EA;
      border-radius: 18px;
      padding: 18px;
      margin-bottom: 18px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .product-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    }
    .product-image {
      font-size: 36px;
      margin-right: 16px;
      flex-shrink: 0;
    }
    .product-details {
      flex: 1;
    }
    .product-title {
      font-size: 17px;
      font-weight: 700;
      margin-bottom: 4px;
      color: #1C1C1E;
    }
    .product-score {
      font-size: 14px;
      color: #FFB800;
      margin-bottom: 4px;
    }
    .product-desc {
      font-size: 14px;
      color: #555;
      margin-bottom: 6px;
    }
    .product-justification {
      font-size: 13px;
      color: #3A3A3C;
      margin-bottom: 8px;
      font-style: italic;
    }
    .product-link {
      font-size: 14px;
      color: #007AFF;
      text-decoration: none;
      font-weight: 600;
    }
    .product-link:hover {
      text-decoration: underline;
    }
    .disclaimer {
      font-size: 12px;
      color: #6C6C70;
      margin-top: 12px;
      text-align: left;
    }
    .trust-note {
      margin-top: 20px;
      font-size: 13px;
      color: #6C6C70;
      text-align: center;
    }
    .trust-note span {
      font-size: 16px;
    }
    footer {
      margin-top: auto;
      padding: 16px;
      text-align: center;
      font-size: 12px;
      color: #6C6C70;
    }

    /* Cookie Banner Styles */
    /*
      Die Cookie-Leiste erscheint am unteren Bildschirmrand, um die Zustimmung
      zur Verwendung von Cookies und Tracking‑Scripts einzuholen. Sie bleibt
      fixiert, bis der Nutzer sie akzeptiert. Die Farbgebung orientiert sich
      an den übrigen UI‑Elementen.
    */
    .cookie-banner {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(255, 255, 255, 0.96);
      border-top: 1px solid #E5E5EA;
      padding: 16px;
      font-size: 14px;
      color: #3A3A3C;
      display: none;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 -2px 10px rgba(0,0,0,0.04);
      z-index: 999;
    }
    /* Klasse zum Einblenden der Cookie-Leiste */
    .cookie-banner.show {
      display: flex;
    }
    .cookie-banner button {
      background: linear-gradient(90deg, #007AFF 0%, #00C7FF 100%);
      color: #FFFFFF;
      border: none;
      border-radius: 14px;
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
      transition: filter 0.15s ease;
    }
    .cookie-banner button:hover {
      filter: brightness(0.95);
    }
    @media (max-width: 640px) {
      .card {
        padding: 24px;
        border-radius: 18px;
      }
      .field {
        flex-direction: column;
        align-items: flex-start;
      }
      .field label {
        flex: none;
        margin-bottom: 6px;
        width: 100%;
      }
      .field input[type="time"],
      .field select {
        width: 100%;
      }
      .field input[type="checkbox"] {
        margin-top: 4px;
      }
    }