:root{
    --alge: #3A3D0C;
    --kalk: #EAE2D5;
    --chloro-hell: #EEF5B2;
    --chloro-dunkel: #E7F191;
    --weiss: #FFFFFF;
    --kristall: #FF9888;
    --alge-70: rgba(58,61,12,0.7);
    --alge-10: rgba(58,61,12,0.08);
    --radius: 18px;
    --maxw: 1180px;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }

  html{ scroll-behavior:smooth; }

  body{
    font-family:'Poppins', sans-serif;
    color: var(--alge);
    background: var(--weiss);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

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

  a{ color:inherit; text-decoration:none; }

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

  h1,h2,h3{ font-weight:700; line-height:1.15; letter-spacing:-0.02em; }

  .eyebrow{
    text-transform:uppercase;
    letter-spacing:0.14em;
    font-size:0.72rem;
    font-weight:600;
    color: var(--alge-70);
  }

  /* ---------- HEADER ---------- */
  header{
    position:sticky;
    top:0;
    z-index:50;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    border-bottom:1px solid var(--alge-10);
  }
  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 14px 24px;
  }
  .logo-mark{
    font-weight:800;
    font-size:1.05rem;
    letter-spacing:0.02em;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .logo-mark .dot{
    width:9px; height:9px; border-radius:50%;
    background: var(--kristall);
    display:inline-block;
  }
  .logo-sub{
    font-size:0.68rem;
    color: var(--alge-70);
    font-weight:400;
    display:block;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 13px 24px;
    border-radius: 999px;
    font-weight:600;
    font-size:0.92rem;
    border:2px solid transparent;
    cursor:pointer;
    transition: transform .15s ease, box-shadow .15s ease;
    white-space:nowrap;
  }
  .btn:active{ transform: scale(0.97); }
  .btn-icon{
    width:18px; height:18px;
    flex-shrink:0;
  }

  .btn-primary{
    background: var(--kristall);
    color: var(--alge);
    box-shadow: 0 6px 18px rgba(255,152,136,0.45);
  }
  .btn-primary:hover{ box-shadow: 0 8px 22px rgba(255,152,136,0.6); transform: translateY(-1px); }
  .btn-outline{
    background:transparent;
    border-color: var(--kristall);
    color: var(--kristall);
  }
  .btn-outline:hover{ background: var(--kristall); color: var(--alge); }
  .btn-small{ padding: 9px 16px; font-size:0.8rem; }

  /* Haupt-CTA: bewusst groesser als ein normaler Button, damit in der
     Hero-Sektion eindeutig ist, was der erste Schritt sein soll. */
  .btn-lg{ padding:17px 32px; font-size:1.02rem; }
  .btn-lg .btn-icon{ width:20px; height:20px; }

  /* Dezenter, langsamer Puls auf dem Schein des Buttons - zieht den Blick,
     ohne zu zappeln. Beim Hovern haelt er an, damit der normale
     Hover-Effekt sichtbar bleibt. Wer im Betriebssystem "Bewegung
     reduzieren" eingestellt hat, bekommt gar keine Animation. */
  @keyframes cta-puls{
    0%, 100%{ box-shadow: 0 6px 18px rgba(255,152,136,0.45); }
    50%     { box-shadow: 0 10px 30px rgba(255,152,136,0.85); }
  }
  .btn-puls{ animation: cta-puls 2.8s ease-in-out infinite; }
  .btn-puls:hover{ animation:none; }
  @media (prefers-reduced-motion: reduce){
    .btn-puls{ animation:none; }
  }


  /* ---------- HERO ---------- */
  .hero{
    background: var(--alge);
    color: var(--weiss);
    position:relative;
    overflow:hidden;
    padding: 56px 0 72px;
  }
  .hero::before{
    content:"";
    position:absolute;
    top:-120px; right:-120px;
    width:420px; height:420px;
    border-radius:50%;
    background: radial-gradient(circle, var(--chloro-hell) 0%, transparent 70%);
    opacity:0.35;
  }
  .hero-inner{
    position:relative;
    z-index:2;
    display:grid;
    gap:36px;
  }
  @media(min-width:900px){
    .hero-inner{ grid-template-columns: 1.15fr 0.85fr; align-items:center; gap:56px; }
  }
  .hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background: rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.25);
    padding: 7px 16px;
    border-radius:999px;
    font-size:0.78rem;
    font-weight:500;
    margin-bottom:22px;
  }
  .hero h1{
    font-size: clamp(2.1rem, 5.2vw, 3.4rem);
    color: var(--weiss);
    margin-bottom:20px;
  }
  .hero h1 em{
    font-style:normal;
    color: var(--chloro-dunkel);
  }
  .hero p.lead{
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: rgba(255,255,255,0.82);
    max-width: 46ch;
    margin-bottom:32px;
    font-weight:300;
  }
  .hero-ctas{
    display:flex;
    flex-wrap:wrap;
    /* Ohne align-items werden alle Buttons auf die Hoehe des groessten
       gestreckt - der Haupt-CTA waere dann nicht mehr sichtbar groesser
       als die Nebenwege. */
    align-items:center;
    gap:14px;
    margin-bottom:26px;
  }
  .hero-ctas .btn-outline{
    border-color: rgba(255,255,255,0.5);
    color: var(--weiss);
  }
  .hero-ctas .btn-outline:hover{ background: rgba(255,255,255,0.12); color:var(--weiss); }

  .trustline{
    font-size:0.85rem;
    color: rgba(255,255,255,0.65);
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .trustline .sep{ opacity:0.5; }

  .hero-visual{
    position:relative;
  }
  .hero-photo-frame{
    aspect-ratio: 4/5;
    background: var(--chloro-hell);
    border-radius: var(--radius);
    display:flex;
    align-items:center;
    justify-content:center;
    color: var(--alge);
    font-size:0.85rem;
    text-align:center;
    padding:0;
    position:relative;
    overflow:hidden;
    border: 6px solid rgba(255,255,255,0.15);
  }
  .hero-photo-frame span{ opacity:0.55; padding:24px; }
  .hero-photo-img{ width:100%; height:100%; object-fit:cover; display:block; }

  /* ---------- SECTION GENERIC ---------- */
  section{ padding: 72px 0; }
  .section-head{
    max-width: 640px;
    margin-bottom:44px;
  }
  .section-head h2{
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    margin-top:10px;
  }
  .section-head p{
    margin-top:14px;
    color: var(--alge-70);
    font-size:1.02rem;
  }

  /* ---------- ABLAUF / TIMELINE ---------- */
  .ablauf{ background: var(--kalk); }
  .steps{
    display:grid;
    gap:20px;
  }
  @media(min-width:800px){
    .steps{ grid-template-columns: repeat(3, 1fr); gap:28px; }
  }
  .step{
    background: var(--weiss);
    border-radius: var(--radius);
    padding:32px 26px;
    position:relative;
  }
  .step-num{
    width:44px; height:44px;
    border-radius:50%;
    background: var(--alge);
    color: var(--weiss);
    display:flex; align-items:center; justify-content:center;
    font-weight:700;
    margin-bottom:18px;
    font-size:1.05rem;
  }
  .step h3{ font-size:1.08rem; margin-bottom:10px; }
  .step p{ font-size:0.92rem; color: var(--alge-70); }
  .steps-connector{
    display:none;
  }
  @media(min-width:800px){
    .steps:not(.steps-4) .step:not(:last-child)::after{
      content:"→";
      position:absolute;
      right:-26px;
      top:32px;
      font-size:1.3rem;
      color: var(--alge-70);
    }
  }
  .ablauf-note{
    margin-top:28px;
    font-size:0.9rem;
    color: var(--alge-70);
    max-width: 60ch;
  }

  /* ---------- QUIZ ---------- */
  .quiz{
    background: var(--weiss);
  }
  .quiz-card{
    background: var(--alge);
    color: var(--weiss);
    border-radius: 24px;
    padding: 40px 24px;
  }
  @media(min-width:700px){ .quiz-card{ padding: 52px 48px; } }
  .quiz-card .eyebrow{ color: var(--chloro-dunkel); }
  .quiz-card h2{ color: var(--weiss); font-size: clamp(1.5rem, 3vw, 2rem); margin: 10px 0 8px; }
  .quiz-card p.lead{ color: rgba(255,255,255,0.75); max-width:56ch; margin-bottom:30px; font-size:0.98rem; }

  .quiz-options{
    display:grid;
    gap:12px;
    grid-template-columns: 1fr;
    margin-bottom:26px;
  }
  @media(min-width:640px){
    .quiz-options{ grid-template-columns: 1fr 1fr; }
  }
  .quiz-option{
    background: rgba(255,255,255,0.06);
    border:1.5px solid rgba(255,255,255,0.22);
    border-radius:14px;
    padding:18px 20px;
    text-align:left;
    cursor:pointer;
    color: var(--weiss);
    font-family:inherit;
    font-size:0.96rem;
    font-weight:500;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
  }
  .quiz-option:hover{
    background: rgba(255,255,255,0.14);
    border-color: var(--chloro-dunkel);
  }
  .quiz-option.active{
    background: var(--kristall);
    color: var(--alge);
    border-color: var(--kristall);
  }
  .quiz-option .arrow{ opacity:0.6; font-size:1.1rem; }

  .quiz-result{
    display:none;
    background: rgba(255,255,255,0.08);
    border-radius:14px;
    padding:22px 24px;
    margin-top:8px;
  }
  .quiz-result.show{ display:block; }
  .quiz-result p{ font-size:0.9rem; color: rgba(255,255,255,0.78); margin-bottom:14px; }
  .quiz-result .btn-primary{ width:100%; justify-content:center; }
  @media(min-width:520px){ .quiz-result .btn-primary{ width:auto; } }

  /* ---------- THEMEN ---------- */
  .themen{ background: var(--kalk); }
  .theme-grid{
    display:grid;
    gap:18px;
    grid-template-columns: 1fr;
  }
  @media(min-width:640px){ .theme-grid{ grid-template-columns: 1fr 1fr; } }
  .theme-card{
    background: var(--weiss);
    border-radius:16px;
    padding:26px 24px;
    border-left: 4px solid var(--chloro-dunkel);
  }
  .theme-card h3{ font-size:1.02rem; margin-bottom:8px; }
  .theme-card p{ font-size:0.9rem; color: var(--alge-70); }
  .themen-disclaimer{
    margin-top:24px;
    font-size:0.82rem;
    color: var(--alge-70);
    font-style:italic;
  }

  /* ---------- ÜBER MICH ---------- */
  .about{ background: var(--weiss); }
  .about-inner{
    display:grid;
    gap:36px;
    align-items:center;
  }
  @media(min-width:860px){
    .about-inner{ grid-template-columns: 0.8fr 1.2fr; gap:56px; }
  }
  .about-photo{
    aspect-ratio: 1/1;
    background: var(--chloro-hell);
    border-radius: var(--radius);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:0;
    color: var(--alge-70);
    font-size:0.85rem;
    overflow:hidden;
  }
  .about-photo-img{ width:100%; height:100%; object-fit:cover; display:block; }
  .about-text h2{ font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom:16px; }
  .about-text p{ margin-bottom:14px; color: var(--alge-70); }
  .about-text p strong{ color: var(--alge); }
  .about-badges{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top:22px;
  }
  .about-badge{
    background: var(--kalk);
    padding:10px 16px;
    border-radius:999px;
    font-size:0.82rem;
    font-weight:500;
  }

  /* ---------- KONTAKT ---------- */
  .kontakt{
    background: var(--alge);
    color: var(--weiss);
  }
  .kontakt .section-head p{ color: rgba(255,255,255,0.7); }
  .kontakt-grid{
    display:grid;
    gap:16px;
    grid-template-columns: 1fr;
  }
  @media(min-width:760px){ .kontakt-grid{ grid-template-columns: repeat(3, 1fr); } }
  .kontakt-card{
    background: rgba(255,255,255,0.07);
    border:1px solid rgba(255,255,255,0.18);
    border-radius:16px;
    padding:26px 22px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .kontakt-card .icon{
    width:38px; height:38px;
    border-radius:10px;
    background: var(--kristall);
    color: var(--alge);
    display:flex; align-items:center; justify-content:center;
    font-weight:700;
  }
  .kontakt-card h3{ font-size:1rem; }
  .kontakt-card p{ font-size:0.88rem; color: rgba(255,255,255,0.65); }
  .kontakt-card .btn{ margin-top:auto; align-self:flex-start; }

  .kontakt-form{
    margin-top:40px;
    background: rgba(255,255,255,0.06);
    border-radius: var(--radius);
    padding: 32px 26px;
  }
  .kontakt-form h3{ margin-bottom:6px; font-size:1.1rem; }
  .kontakt-form p.hint{ font-size:0.85rem; color: rgba(255,255,255,0.6); margin-bottom:22px; }
  .form-row{ display:grid; gap:16px; margin-bottom:16px; }
  @media(min-width:640px){ .form-row.two{ grid-template-columns: 1fr 1fr; } }
  label{ display:block; font-size:0.8rem; margin-bottom:6px; color: rgba(255,255,255,0.75); }
  input, select, textarea{
    width:100%;
    padding:12px 14px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.05);
    color: var(--weiss);
    font-family:inherit;
    font-size:0.92rem;
  }
  input::placeholder, textarea::placeholder{ color: rgba(255,255,255,0.4); }
  textarea{ resize:vertical; min-height:90px; }

  /* Das <select> selbst ist bewusst weiss auf dunkel (passt zum Formular),
     aber die aufgeklappte Optionsliste rendert der Browser mit einem
     eigenen, meist hellen Hintergrund - darin wuerde weisser Text
     verschwinden und war nur beim Hover (Systemfarbe) kurz zu erkennen.
     Deshalb fuer die <option>-Elemente Text und Hintergrund explizit
     dunkel-auf-hell setzen, unabhaengig vom umgebenden Formular. */
  select option{
    color: var(--alge);
    background: var(--weiss);
  }

  /* ---------- FOOTER ---------- */
  footer{
    background: var(--alge);
    color: rgba(255,255,255,0.55);
    padding: 28px 0 110px;
    font-size:0.8rem;
    border-top:1px solid rgba(255,255,255,0.12);
  }
  .footer-inner{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  @media(min-width:700px){
    .footer-inner{ flex-direction:row; justify-content:space-between; align-items:center; }
  }
  .footer-links{ display:flex; gap:18px; flex-wrap:wrap; }
  .footer-links a:hover{ color: var(--weiss); }

  /* ---------- STICKY WHATSAPP ---------- */
  .sticky-wa{
    position:fixed;
    bottom:20px;
    right:20px;
    z-index:100;
    display:flex;
    align-items:center;
    gap:10px;
    background: var(--kristall);
    color: var(--alge);
    padding: 15px 22px;
    border-radius:999px;
    font-weight:600;
    font-size:0.9rem;
    box-shadow: 0 10px 30px rgba(58,61,12,0.35);
  }
  .sticky-wa:hover{ transform: translateY(-2px); }
  .sticky-wa .wa-dot{
    width:8px; height:8px; border-radius:50%;
    background: var(--alge);
    animation: pulse 1.8s infinite;
  }
  @keyframes pulse{
    0%{ opacity:1; } 50%{ opacity:0.3; } 100%{ opacity:1; }
  }
  /* Zwei Beschriftungen, je nach Platz: bis 480px die Kurzform.
     Vorher stand am kurzen Label ein "style=display:none" direkt im HTML -
     das ueberstimmt jede CSS-Regel, dadurch war auf dem Handy gar kein Text
     zu sehen, nur der pulsierende Punkt. Inline-Style ist raus, gesteuert
     wird jetzt komplett hier. */
  .sticky-wa span.wa-label-short{ display:none; }
  @media(max-width:480px){
    .sticky-wa span.wa-label-full{ display:none; }
    .sticky-wa span.wa-label-short{ display:inline; }
  }


  .reico-logo{ height:26px; width:auto; display:block; }
  .reico-logo-lg{ height:44px; width:auto; display:block; }
  .header-brand{ display:flex; align-items:center; gap:14px; text-decoration:none; }
  .header-brand:hover{ opacity:0.82; }
  .header-brand .divider{ width:1px; height:28px; background: var(--alge-10); }
  .header-brand .vp-label{ font-size:0.72rem; line-height:1.3; color: var(--alge-70); }
  .header-brand .vp-label strong{ display:block; color: var(--alge); font-size:0.85rem; font-weight:600; }
  .hero-logo-badge{
    display:inline-flex;
    align-items:center;
    gap:12px;
    background: rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.2);
    padding:10px 18px 10px 14px;
    border-radius:999px;
    margin-bottom:26px;
  }
  .hero-logo-badge .reico-logo{ height:20px; }
  .hero-logo-badge span{ font-size:0.78rem; color: rgba(255,255,255,0.85); font-weight:500; }
  .warum-reico{ background: var(--weiss); }
  .warum-reico-inner{
    background: var(--chloro-hell);
    border-radius: 28px;
    padding: 48px 28px;
    display:grid;
    gap:32px;
    align-items:center;
  }
  @media(min-width:860px){ .warum-reico-inner{ grid-template-columns: 0.9fr 1.1fr; padding:56px 60px; gap:48px; } }
  .warum-reico-logo{ display:flex; justify-content:flex-start; }
  .warum-reico-logo .reico-logo-lg{ height:56px; }
  .warum-reico-text p{ font-size:1rem; color: var(--alge); margin-bottom:14px; }
  .warum-reico-text p:last-child{ margin-bottom:0; }
  .footer-logo{ margin-bottom:10px; }
  .footer-logo .reico-logo{ height:22px; }


  .lead-form-note{
    font-size:0.8rem;
    color: rgba(255,255,255,0.55);
    margin-top:12px;
  }
  .checkbox-row{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin: 4px 0 20px;
  }
  .checkbox-row input[type="checkbox"]{
    width:18px; height:18px;
    margin-top:2px;
    accent-color: var(--kristall);
    flex-shrink:0;
  }
  .checkbox-row label{
    margin:0;
    font-size:0.85rem;
    color: rgba(255,255,255,0.8);
    line-height:1.4;
  }
  .form-success{
    display:none;
    background: var(--chloro-hell);
    color: var(--alge);
    border-radius:12px;
    padding:18px 20px;
    font-size:0.92rem;
    font-weight:500;
    margin-top:16px;
  }
  .form-success.show{ display:block; }
  .form-error{
    display:none;
    background: rgba(255,152,136,0.15);
    border:1px solid var(--kristall);
    color: var(--weiss);
    border-radius:12px;
    padding:14px 18px;
    font-size:0.85rem;
    margin-top:14px;
  }
  .form-error.show{ display:block; }

  /* ---------- HANDBUCH (Lead-Magnet) ---------- */
  .handbuch{ background: var(--kalk); }
  .handbuch-inner{
    display:grid;
    gap:36px;
    align-items:center;
  }
  @media(min-width:900px){ .handbuch-inner{ grid-template-columns: 1fr 1fr; gap:56px; } }
  .handbuch-visual{
    background: var(--weiss);
    border-radius: var(--radius);
    padding: 32px 28px;
    text-align:center;
  }
  .handbuch-visual .handbuch-cover{
    width:180px;
    margin:0 auto 20px;
    border-radius:8px;
    box-shadow: 0 14px 34px rgba(58,61,12,0.25);
  }
  .handbuch-visual p{ font-size:0.85rem; color: var(--alge-70); max-width:280px; margin:0 auto; }
  .handbuch-form-card{
    background: var(--alge);
    color: var(--weiss);
    border-radius: var(--radius);
    padding: 32px 26px;
  }
  @media(min-width:600px){ .handbuch-form-card{ padding:40px 36px; } }
  .handbuch-form-card h3{ font-size:1.3rem; margin-bottom:8px; }
  .handbuch-form-card p.hint{ font-size:0.9rem; color: rgba(255,255,255,0.65); margin-bottom:24px; }


  /* ---------- FUTTERCHECK ---------- */
  .fc-progress-wrap{ margin-bottom:28px; }
  .fc-progress-track{
    width:100%;
    height:8px;
    background: rgba(255,255,255,0.15);
    border-radius:999px;
    overflow:hidden;
    margin-bottom:8px;
  }
  .fc-progress-bar{
    height:100%;
    width:0%;
    background: var(--kristall);
    border-radius:999px;
    transition: width .4s ease;
  }
  .fc-progress-toprow{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;
  }
  .fc-progress-label{
    font-size:0.78rem;
    color: rgba(255,255,255,0.6);
  }
  .fc-progress-pct{
    font-size:0.78rem;
    font-weight:700;
    color: var(--kristall);
  }
  .fc-step{ animation: fcFadeIn .35s ease; }
  @keyframes fcFadeIn{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform:none; } }
  .fc-step h2{ color: var(--weiss); font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin-bottom:22px; }
  .fc-choice-grid{
    display:grid;
    gap:12px;
    grid-template-columns: 1fr;
    margin-bottom:26px;
  }
  @media(min-width:640px){ .fc-choice-grid{ grid-template-columns: 1fr 1fr; } }
  .fc-choice{
    background: rgba(255,255,255,0.06);
    border:1.5px solid rgba(255,255,255,0.22);
    border-radius:14px;
    padding:16px 18px;
    text-align:left;
    cursor:pointer;
    color: var(--weiss);
    font-family:inherit;
    font-size:0.95rem;
    font-weight:500;
    transition: background .15s ease, border-color .15s ease;
  }
  .fc-choice:hover{ background: rgba(255,255,255,0.14); border-color: var(--kristall); }
  .fc-choice.selected{ background: var(--kristall); color: var(--alge); border-color: var(--kristall); }
  .fc-text-input{
    width:100%;
    padding:16px 18px;
    border-radius:14px;
    border:1.5px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.06);
    color: var(--weiss);
    font-family:inherit;
    font-size:1rem;
    margin-bottom:26px;
  }
  .fc-text-input::placeholder{ color: rgba(255,255,255,0.4); }
  .fc-nav{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
  .fc-back{
    background:none; border:none; color: rgba(255,255,255,0.55);
    font-family:inherit; font-size:0.85rem; cursor:pointer; padding:10px 4px;
  }
  .fc-back:hover{ color: var(--weiss); }
  .fc-next{ margin-left:auto; }
  .fc-next:disabled{ opacity:0.4; cursor:not-allowed; }
  .fc-hint{ font-size:0.8rem; color: rgba(255,255,255,0.5); margin-top:-14px; margin-bottom:22px; }

  /* Lead-Formular als letzter Schritt */
  .fc-lead-fields{ display:grid; gap:16px; margin-bottom:20px; }
  @media(min-width:600px){ .fc-lead-fields.two{ grid-template-columns: 1fr 1fr; } }
  .fc-lead-fields label{ font-size:0.8rem; color: rgba(255,255,255,0.75); display:block; margin-bottom:6px; }

  /* Ergebnis-Screen */
  .fc-result-head{ display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:28px; }
  .fc-score-circle{
    width:150px; height:150px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:20px;
    background: conic-gradient(var(--fc-score-color, var(--kristall)) calc(var(--fc-score, 0) * 1%), rgba(255,255,255,0.12) 0);
    transition: background 1.2s ease-out;
  }
  .fc-score-circle-inner{
    width:118px; height:118px;
    border-radius:50%;
    background: var(--alge);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    color: var(--weiss);
  }
  .fc-score-circle-inner .fc-score-num{ font-size:2rem; font-weight:800; line-height:1; }
  .fc-score-circle-inner .fc-score-max{ font-size:0.75rem; color: rgba(255,255,255,0.5); }
  .fc-result-badge{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 18px; border-radius:999px;
    font-size:0.85rem; font-weight:600;
    margin-bottom:14px;
  }
  .fc-result-badge.good{ background: var(--chloro-hell); color: var(--alge); }
  .fc-result-badge.mid{ background: var(--kalk); color: var(--alge); }
  .fc-result-badge.low{ background: var(--weiss); color: var(--alge); border:2px solid var(--kristall); }
  .fc-result-head h2{ margin-bottom:8px; }
  .fc-result-head p{ color: rgba(255,255,255,0.75); max-width:48ch; font-size:0.95rem; }
  .fc-result-topics{
    background: rgba(255,255,255,0.06);
    border-radius:14px;
    padding:22px 24px;
    margin-bottom:24px;
  }
  .fc-result-topics h3{ color: var(--weiss); font-size:1rem; margin-bottom:12px; }
  .fc-result-topics ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
  .fc-result-topics li{ color: rgba(255,255,255,0.8); font-size:0.9rem; display:flex; gap:8px; }
  .fc-result-cta{ text-align:center; }
  .fc-result-cta .btn{ width:100%; justify-content:center; }
  @media(min-width:480px){ .fc-result-cta .btn{ width:auto; } }
  .fc-result-note{ font-size:0.8rem; color: rgba(255,255,255,0.5); margin-top:14px; }

  .disclosure-strip{
    background: var(--chloro-hell);
    text-align:center;
    font-size:0.78rem;
    padding:8px 16px;
    color: var(--alge);
  }


/* ============================================================
   NAVIGATION
   ============================================================ */
.header-inner{ gap:16px; }

.main-nav{
  display:flex;
  align-items:center;
  gap:6px;
}
.nav-link{
  padding:9px 14px;
  border-radius:999px;
  font-size:0.88rem;
  font-weight:500;
  color: var(--alge);
  white-space:nowrap;
  transition: background .15s ease;
}
.nav-link:hover{ background: var(--alge-10); }
.nav-link.current{ background: var(--chloro-hell); font-weight:600; }
.nav-cta{ margin-left:8px; }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px; height:44px;
  padding:0 10px;
  background:none;
  border:none;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  height:2px;
  width:100%;
  background: var(--alge);
  border-radius:2px;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media(max-width:900px){
  .nav-toggle{ display:flex; }
  .main-nav{
    position:absolute;
    top:100%; left:0; right:0;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    background: var(--weiss);
    border-bottom:1px solid var(--alge-10);
    box-shadow: 0 14px 30px rgba(58,61,12,0.12);
    padding:14px 20px 20px;
    display:none;
  }
  .main-nav.open{ display:flex; }
  .nav-link{ padding:13px 14px; font-size:0.95rem; }
  .nav-cta{ margin-left:0; margin-top:6px; justify-content:center; }
  .header-brand .vp-label{ display:none; }
  .header-brand .divider{ display:none; }
}
@media(max-width:400px){
  .reico-logo{ height:22px; }
}
header{ position:sticky; }

/* ============================================================
   PARTNER-SEITE
   ============================================================ */
.page-hero{
  background: var(--alge);
  color: var(--weiss);
  padding: 64px 0 72px;
  position:relative;
  overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute;
  top:-140px; left:-100px;
  width:420px; height:420px;
  border-radius:50%;
  background: radial-gradient(circle, var(--chloro-hell) 0%, transparent 70%);
  opacity:0.3;
}
.page-hero .wrap{ position:relative; z-index:2; }
.page-hero h1{
  font-size: clamp(2rem, 5vw, 3.1rem);
  color: var(--weiss);
  margin-bottom:20px;
  max-width: 18ch;
}
.page-hero h1 em{ font-style:normal; color: var(--chloro-dunkel); }
.page-hero p.lead{
  font-size: clamp(1rem, 2vw, 1.18rem);
  color: rgba(255,255,255,0.82);
  max-width: 52ch;
  font-weight:300;
  margin-bottom:32px;
}

.honest-grid{
  display:grid;
  gap:18px;
  grid-template-columns:1fr;
}
@media(min-width:760px){ .honest-grid{ grid-template-columns:1fr 1fr; } }
.honest-card{
  background: var(--weiss);
  border-radius:16px;
  padding:26px 24px;
  border-left:4px solid var(--chloro-dunkel);
}
.honest-card.contra{ border-left-color: var(--kristall); }
.honest-card h3{ font-size:1.02rem; margin-bottom:10px; }
.honest-card ul{ list-style:none; padding:0; margin:0; display:grid; gap:9px; }
.honest-card li{ font-size:0.92rem; color: var(--alge-70); display:flex; gap:9px; align-items:flex-start; }
.honest-card li::before{ content:"–"; opacity:0.5; }

.faq-list{ display:grid; gap:12px; max-width:820px; }
.faq-item{
  background: var(--weiss);
  border-radius:14px;
  border:1px solid var(--alge-10);
  overflow:hidden;
}
.faq-q{
  width:100%;
  text-align:left;
  background:none;
  border:none;
  font-family:inherit;
  font-size:1rem;
  font-weight:600;
  color: var(--alge);
  padding:20px 22px;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.faq-q .chev{ flex-shrink:0; transition: transform .25s ease; opacity:0.55; }
.faq-item.open .faq-q .chev{ transform: rotate(180deg); }
.faq-a{ display:none; padding:0 22px 20px; font-size:0.93rem; color: var(--alge-70); }
.faq-item.open .faq-a{ display:block; }

.partner-cta{ background: var(--alge); color: var(--weiss); }
.partner-cta h2{ color: var(--weiss); }
.partner-cta .section-head p{ color: rgba(255,255,255,0.72); }
.cta-row{ display:flex; flex-wrap:wrap; gap:14px; }

.compliance-note{
  background: var(--kalk);
  padding: 26px 0;
  font-size:0.8rem;
  color: var(--alge-70);
  line-height:1.6;
}

/* ============================================================
   SCHRIFTEN - Poppins, lokal ausgeliefert
   Keine Verbindung zu Google-Servern, keine IP-Uebertragung.
   Subset latin, bezogen ueber google-webfonts-helper.
   ============================================================ */
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:300; font-display:swap;
  src:url('../fonts/poppins-v24-latin-300.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/poppins-v24-latin-regular.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/poppins-v24-latin-500.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/poppins-v24-latin-600.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/poppins-v24-latin-700.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:800; font-display:swap;
  src:url('../fonts/poppins-v24-latin-800.woff2') format('woff2'); }

/* ============================================================
   RECHTSTEXTE (Impressum / Datenschutz)
   ============================================================ */
.legal{ background: var(--weiss); padding: 56px 0 80px; }
.legal-inner{ max-width: 820px; }
.legal h1{
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  margin-bottom:10px;
}
.legal .updated{
  font-size:0.82rem;
  color: var(--alge-70);
  margin-bottom:36px;
  padding-bottom:20px;
  border-bottom:1px solid var(--alge-10);
}
.legal h2{
  font-size:1.25rem;
  margin:40px 0 14px;
  padding-top:8px;
}
.legal h3{
  font-size:1rem;
  margin:26px 0 8px;
}
.legal p{ margin-bottom:13px; color: var(--alge-70); font-size:0.94rem; }
.legal p strong, .legal li strong{ color: var(--alge); }
.legal ul{ margin:0 0 16px 0; padding-left:20px; }
.legal li{ margin-bottom:7px; color: var(--alge-70); font-size:0.94rem; }
.legal a{ color: var(--alge); text-decoration:underline; text-underline-offset:2px; }
.legal a:hover{ color: var(--kristall); }

.legal-box{
  background: var(--kalk);
  border-radius:14px;
  padding:22px 24px;
  margin: 18px 0 26px;
}
.legal-box p:last-child{ margin-bottom:0; }
.legal-box.highlight{
  background: var(--chloro-hell);
  border-left:4px solid var(--alge);
}
.legal-table{
  width:100%;
  border-collapse:collapse;
  margin: 8px 0 24px;
  font-size:0.9rem;
}
.legal-table th, .legal-table td{
  text-align:left;
  padding:11px 14px;
  border-bottom:1px solid var(--alge-10);
  vertical-align:top;
}
.legal-table th{ font-weight:600; color: var(--alge); background: var(--kalk); }
.legal-table td{ color: var(--alge-70); }
.legal-toc{
  background: var(--kalk);
  border-radius:14px;
  padding:20px 24px;
  margin-bottom:36px;
}
.legal-toc ol{ margin:0; padding-left:20px; }
.legal-toc li{ margin-bottom:5px; font-size:0.9rem; }
.legal-toc a{ text-decoration:none; }
.legal-toc a:hover{ text-decoration:underline; }


/* ============================================================
   VIER SCHRITTE IN EINER REIHE (Partner-Seite)
   Ohne diese Regel bricht der vierte Schritt in eine neue Zeile,
   weil .steps standardmaessig auf drei Spalten steht.
   ============================================================ */
@media(min-width:640px) and (max-width:1059px){
  .steps-4{ grid-template-columns: repeat(2, 1fr) !important; gap:20px; }
}
@media(min-width:1060px){
  .steps-4{ grid-template-columns: repeat(4, 1fr) !important; gap:20px; }
  .steps-4 .step{ padding:28px 22px; }
  .steps-4 .step:not(:last-child)::after{
    content:"→";
    position:absolute;
    right:-18px;
    top:30px;
    font-size:1.15rem;
    color: var(--alge-70);
  }
}

/* ============================================================
   KACHELN AUF WEISSEM GRUND
   Weisse Karten auf weissem Hintergrund verschwinden - auf hellen
   Sektionen bekommen sie deshalb die Kalk-Flaeche.
   ============================================================ */
.section-on-white .theme-card{
  background: var(--kalk);
  border-left-color: var(--alge);
}

/* ============================================================
   HERO MIT BILD (Partner-Seite)
   ============================================================ */
.page-hero .hero-grid{
  display:grid;
  gap:32px;
  align-items:center;
}
@media(min-width:900px){
  .page-hero .hero-grid{ grid-template-columns: 1.1fr 0.9fr; gap:52px; }
}
.page-hero h1{ max-width:none; }
.page-hero-photo{
  border-radius: var(--radius);
  overflow:hidden;
  border: 6px solid rgba(255,255,255,0.15);
  aspect-ratio: 4/5;
  max-width: 420px;
  margin-left:auto;
}
.page-hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
@media(max-width:899px){
  /* Auf dem Handy bewusst nicht 16/10: bei einem hochformatigen Bild
     wuerde cover die oberen 25 Prozent abschneiden - und damit genau
     das Gesicht. 1/1 plus object-position haelt den Kopf im Bild. */
  .page-hero-photo{ max-width:100%; aspect-ratio: 1/1; margin:0; }
  .page-hero-photo img{ object-position: 50% 22%; }
}
@media(max-width:520px){
  .page-hero-photo{ aspect-ratio: 4/5; }
  .page-hero-photo img{ object-position: 50% 50%; }
}

/* Fuenfte Kachel fuellt die Reihe, sonst steht sie allein */
@media(min-width:640px){
  .section-on-white .theme-grid > .theme-card:last-child:nth-child(odd){
    grid-column: 1 / -1;
  }
}





/* ==========================================================================
   COOKIEBOT-BANNER IM EIGENEN DESIGN
   --------------------------------------------------------------------------
   Anhaengen an das ENDE von assets/css/style.css.

   Warum das funktioniert: Cookiebot rendert seinen Dialog direkt in das DOM
   der Seite, nicht in ein iframe. Die Elemente sind also mit eigenem CSS
   erreichbar. Cookiebot injiziert sein eigenes <style> zur Laufzeit in den
   <head>, also NACH dieser Datei - deshalb hier durchgehend !important und
   zusaetzlich ein vorangestelltes "html", um die Spezifitaet ueber die von
   Cookiebot zu heben.

   BEWUSST NICHT GEAENDERT:
   - Layout, Groessen und Reihenfolge der Buttons. Nur Farbe, Schrift, Radius.
   - "Ablehnen", "Auswahl erlauben" und "Alles zulassen" bekommen exakt
     dieselbe Optik. Gleiche Groesse, gleiche Farbe, gleiches Gewicht.
     Das ist keine Geschmacksfrage, sondern Voraussetzung dafuer, dass die
     Einwilligung freiwillig ist (§ 25 TDDDG i.V.m. Art. 4 Nr. 11 DSGVO).
   - Der "Powered by Cookiebot"-Link wird nur abgedunkelt, nicht versteckt.
     Branding-Entfernung ist eine kostenpflichtige Funktion; Ausblenden per
     CSS waere eine Umgehung.
   - Das Korallrot (--kristall) wird NICHT fuer die Banner-Buttons benutzt.
     Diese Farbe traegt auf der Seite die echten CTAs (WhatsApp, Futtercheck).
     Ein Cookie-Banner soll damit nicht konkurrieren. Koralle taucht hier nur
     als feiner Akzent auf: aktiver Tab und aktivierte Schalter.
   ========================================================================== */

/* ---------- Grundflaeche ---------- */

html #CybotCookiebotDialogBodyUnderlay{
  background: var(--alge) !important;
  opacity: 0.55 !important;
}

html #CybotCookiebotDialog{
  font-family: 'Poppins', sans-serif !important;
  background: var(--kalk) !important;
  color: var(--alge) !important;
  border: 1px solid var(--alge-10) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 18px 50px rgba(58,61,12,0.18) !important;
}

html #CybotCookiebotDialog *{
  font-family: 'Poppins', sans-serif !important;
}

/* ---------- Text ---------- */

html #CybotCookiebotDialogBodyContentTitle,
html #CybotCookiebotDialogDetailBodyContentTextOverviewTitle{
  color: var(--alge) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}

html #CybotCookiebotDialogBodyContentText,
html #CybotCookiebotDialogDetailBodyContentTextAbout,
html #CybotCookiebotDialogDetailBodyContentCookieContainerTypeDetails,
html #CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonDescription{
  color: var(--alge-70) !important;
  line-height: 1.6 !important;
}

html #CybotCookiebotDialog a,
html #CybotCookiebotDialog a:visited{
  color: var(--alge) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
html #CybotCookiebotDialog a:hover{
  color: var(--kristall) !important;
}

/* ---------- Reiter (Einwilligung / Details / Ueber Cookies) ---------- */

html #CybotCookiebotDialogNav,
html #CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink{
  border-bottom-color: var(--alge-10) !important;
}

html #CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink{
  color: var(--alge-70) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

html #CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink:hover,
html #CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive{
  color: var(--alge) !important;
  border-bottom-color: var(--kristall) !important;
  text-decoration: none !important;
}

/* ---------- Buttons: alle drei identisch ---------- */

html #CybotCookiebotDialog .CybotCookiebotDialogBodyButton,
html #CybotCookiebotDialogBodyButtonDecline,
html #CybotCookiebotDialogBodyButtonAccept,
html #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection,
html #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll,
html #CybotCookiebotDialogBodyLevelButtonAccept{
  background: var(--alge) !important;
  border: 2px solid var(--alge) !important;
  color: var(--kalk) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  padding: 12px 22px !important;
  cursor: pointer !important;
  transition: transform .15s ease, opacity .15s ease !important;
}

html #CybotCookiebotDialog .CybotCookiebotDialogBodyButton:hover,
html #CybotCookiebotDialogBodyButtonDecline:hover,
html #CybotCookiebotDialogBodyButtonAccept:hover,
html #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection:hover,
html #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll:hover,
html #CybotCookiebotDialogBodyLevelButtonAccept:hover{
  opacity: 0.88 !important;
  transform: translateY(-1px) !important;
}

html #CybotCookiebotDialog .CybotCookiebotDialogBodyButton:active{
  transform: scale(0.97) !important;
}

/* "Anpassen" / "Details zeigen" ist keine Einwilligung, sondern ein
   Navigationsschritt - deshalb als ruhige Outline-Variante. */
html #CybotCookiebotDialogBodyLevelButtonCustomize,
html #CybotCookiebotDialogBodyEdgeMoreDetailsLink,
html #CybotCookiebotDialogBodyEdgeMoreDetails a{
  background: transparent !important;
  border: 2px solid var(--alge-10) !important;
  color: var(--alge) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
html #CybotCookiebotDialogBodyLevelButtonCustomize:hover{
  border-color: var(--alge) !important;
  background: transparent !important;
}

/* ---------- Kategorie-Schalter ---------- */

html #CybotCookiebotDialogBodyLevelButtonsSelectPane{
  background: transparent !important;
  border: 1px solid var(--alge-10) !important;
  border-radius: 12px !important;
}

html #CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSlider{
  background-color: rgba(58,61,12,0.25) !important;
}

html #CybotCookiebotDialog input:checked + .CybotCookiebotDialogBodyLevelButtonSlider{
  background-color: var(--kristall) !important;
}

html #CybotCookiebotDialog input:disabled + .CybotCookiebotDialogBodyLevelButtonSlider{
  background-color: rgba(58,61,12,0.18) !important;
}

html #CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonDescription,
html #CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieTypeTableHeader{
  color: var(--alge) !important;
}

/* ---------- Tabellen in der Detailansicht ---------- */

html #CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieTypeTable th,
html #CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieTypeTable td{
  border-color: var(--alge-10) !important;
  color: var(--alge) !important;
}

/* ---------- Tastaturbedienung sichtbar halten ---------- */

html #CybotCookiebotDialog button:focus-visible,
html #CybotCookiebotDialog a:focus-visible,
html #CybotCookiebotDialog input:focus-visible{
  outline: 2px solid var(--kristall) !important;
  outline-offset: 2px !important;
}

/* ---------- Cookiebot-Branding: gedaempft, nicht entfernt ---------- */

html #CybotCookiebotDialogPoweredbyCybot,
html #CybotCookiebotDialogPoweredByText,
html #CybotCookiebotDialogPoweredbyLink{
  opacity: 0.45 !important;
}

/* ---------- Schwebender Trigger, falls spaeter aktiviert ---------- */

html #CookiebotWidget .CookiebotWidget-logo{
  background: var(--alge) !important;
  border-radius: 999px !important;
}

/* ---------- Cookie-Erklaerung auf datenschutz.html ---------- */

html .CookieDeclaration{
  font-family: 'Poppins', sans-serif !important;
  color: var(--alge) !important;
  background: var(--kalk) !important;
  border: 1px solid var(--alge-10) !important;
  border-radius: var(--radius) !important;
  padding: 24px !important;
  line-height: 1.6 !important;
}

html .CookieDeclarationType{
  border: 1px solid var(--alge-10) !important;
  border-radius: 12px !important;
  background: var(--weiss) !important;
}

html .CookieDeclarationTypeHeader{
  color: var(--alge) !important;
  font-weight: 700 !important;
}

html .CookieDeclarationTypeDescription,
html .CookieDeclarationDialogText{
  color: var(--alge-70) !important;
}

html .CookieDeclarationTableHeader,
html .CookieDeclarationTableCell{
  border-color: var(--alge-10) !important;
  color: var(--alge) !important;
}

html a.CookieDeclarationChangeConsentChange,
html #CookieDeclarationChangeConsent a{
  color: var(--alge) !important;
  text-decoration: underline !important;
}

/* ---------- Bewegung reduzieren respektieren ---------- */

@media (prefers-reduced-motion: reduce){
  html #CybotCookiebotDialog .CybotCookiebotDialogBodyButton{
    transition: none !important;
    transform: none !important;
  }
  html #CybotCookiebotDialog .CybotCookiebotDialogBodyButton:hover{
    transform: none !important;
  }
}

/* ---------- Kleine Bildschirme ---------- */

@media (max-width: 600px){
  html #CybotCookiebotDialog .CybotCookiebotDialogBodyButton{
    padding: 12px 16px !important;
    font-size: 0.86rem !important;
  }
}

/* ==========================================================================
   COOKIEBOT PRIVACY TRIGGER (der Kreis unten links)
   --------------------------------------------------------------------------
   Ebenfalls an das ENDE von assets/css/style.css anhaengen, hinter den
   bereits eingebauten Cookiebot-Block.

   Die Farbe des Kreises steckt nicht in einem CSS-Hintergrund, sondern als
   fill-Attribut im SVG. Deshalb wird hier das SVG direkt eingefaerbt - und
   zur Sicherheit zusaetzlich der Hintergrund, falls Cookiebot die Markierung
   in einer spaeteren Version umbaut.
   ========================================================================== */

/* ---------- Der Kreis selbst ---------- */

html #CookiebotWidget .CookiebotWidget-logo,
html #CookiebotWidget button.CookiebotWidget-logo{
  background: transparent !important;
  border-radius: 999px !important;
}

/* Aeusserer Kreis des Icons */
html #CookiebotWidget .CookiebotWidget-logo svg circle,
html #CookiebotWidget svg#CookiebotWidget-widgetIcon circle,
html #CookiebotWidget .CookiebotWidget-main-logo circle{
  fill: var(--alge) !important;
}

/* Innenzeichnung des Icons hell halten, damit der Kontrast stimmt */
html #CookiebotWidget .CookiebotWidget-logo svg path,
html #CookiebotWidget svg#CookiebotWidget-widgetIcon path,
html #CookiebotWidget .CookiebotWidget-main-logo path{
  fill: var(--kalk) !important;
}

/* ---------- Das Panel, das sich beim Klick oeffnet ---------- */

html #CookiebotWidget #CookiebotWidget-widgetContent,
html #CookiebotWidget .CookiebotWidget-body{
  font-family: 'Poppins', sans-serif !important;
  background: var(--kalk) !important;
  color: var(--alge) !important;
  border: 1px solid var(--alge-10) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 18px 50px rgba(58,61,12,0.18) !important;
}

html #CookiebotWidget #CookiebotWidget-widgetContent *{
  font-family: 'Poppins', sans-serif !important;
}

html #CookiebotWidget .CookiebotWidget-header,
html #CookiebotWidget .CookiebotWidget-consent-details,
html #CookiebotWidget .CookiebotWidget-consents-list{
  color: var(--alge) !important;
  border-color: var(--alge-10) !important;
}

/* Haekchen in der Kategorieliste */
html #CookiebotWidget .CookiebotWidget-consents-list li::before,
html #CookiebotWidget .CookiebotWidget-consents-list svg{
  fill: var(--kristall) !important;
  color: var(--kristall) !important;
}

/* Buttons im Panel - wieder bewusst gleichwertig */
html #CookiebotWidget #CookiebotWidget-btn-withdraw,
html #CookiebotWidget #CookiebotWidget-btn-change,
html #CookiebotWidget .CookiebotWidget-btn{
  background: var(--alge) !important;
  border: 2px solid var(--alge) !important;
  color: var(--kalk) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  padding: 10px 18px !important;
  transition: opacity .15s ease !important;
}

html #CookiebotWidget #CookiebotWidget-btn-withdraw:hover,
html #CookiebotWidget #CookiebotWidget-btn-change:hover,
html #CookiebotWidget .CookiebotWidget-btn:hover{
  opacity: 0.88 !important;
}

/* Branding im Panel gedaempft, nicht entfernt */
html #CookiebotWidget .CookiebotWidget-main-logo-wrapper,
html #CookiebotWidget a[href*="cookiebot.com"]{
  opacity: 0.45 !important;
}

/* Tastaturbedienung sichtbar halten */
html #CookiebotWidget button:focus-visible,
html #CookiebotWidget a:focus-visible{
  outline: 2px solid var(--kristall) !important;
  outline-offset: 2px !important;
}