:root{
    /* ---- carried over 1:1 from the app design system ---- */
    --green:        #3B6D11;
    --green-dark:   #27500A;
    --green-light:  #EAF3DE;
    --green-mid:    #C0DD97;
    --amber-bg:     #FAEEDA;
    --amber-fg:     #854F0B;
    --red-bg:       #FCEBEB;
    --red-fg:       #A32D2D;
    --ink:          #1A1A1A;
    --ink-soft:     #6B6B6B;
    --grey-bg:      #F5F5F5;
    --line:         #E6E6E6;

    --display: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --wrap: 1080px;
    --r-card: 20px;
    --r-pill: 99px;
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:#fff; color:var(--ink);
    font-family:var(--body); font-size:18px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}

  h1,h2,h3{font-family:var(--display); font-weight:800; line-height:1.12; letter-spacing:-.022em; margin:0}
  h1{font-size:clamp(2.2rem, 5vw, 3.6rem)}
  h2{font-size:clamp(1.8rem, 3.6vw, 2.6rem)}
  h3{font-size:1.35rem}
  p{margin:0}

  /* the app's uppercase green section label, used site-wide as the structural device */
  .eyebrow{
    font-family:var(--body); font-size:.82rem; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase; color:var(--green);
    margin:0 0 14px;
  }

  a{color:var(--green); text-decoration-thickness:1px; text-underline-offset:3px}
  :focus-visible{outline:3px solid var(--green); outline-offset:3px; border-radius:6px}
  /* Blazor's FocusOnNavigate moves focus to the page's <h1> on every navigation
     so screen readers start at the heading. A heading is not a tab stop, so that
     programmatic focus should not draw the keyboard ring above. */
  h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible{outline:none}

  /* ---------- buttons (app: pill, radius 99) ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    min-height:52px; padding:0 30px; border-radius:var(--r-pill);
    font-family:var(--body); font-weight:700; font-size:1.02rem;
    text-decoration:none; border:2px solid transparent; cursor:pointer;
    transition:transform .15s ease, background .15s ease;
  }
  .btn-primary{background:var(--green); color:#fff}
  .btn-primary:hover{background:var(--green-dark); transform:translateY(-1px)}
  .btn-secondary{background:#fff; color:var(--green); border-color:var(--green)}
  .btn-secondary:hover{background:var(--green-light)}

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
    backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
  }
  .header-inner{display:flex; align-items:center; gap:20px; height:76px}
  .brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink)}
  .brand span{font-family:var(--display); font-size:1.28rem; font-weight:800; letter-spacing:-.02em}
  nav{margin-left:auto; display:flex; align-items:center; gap:8px}
  .navlink{
    background:none; border:0; font-family:var(--body); font-size:1rem; font-weight:600;
    color:var(--ink-soft); padding:10px 16px; border-radius:var(--r-pill); cursor:pointer;
    text-decoration:none;
  }
  .navlink:hover{color:var(--green); background:var(--green-light)}
  .navlink[aria-current="page"]{color:var(--green); background:var(--green-light)}
  nav .btn{min-height:44px; padding:0 22px; font-size:.95rem; margin-left:8px}

  /* ---------- hero ---------- */
  .hero{padding:72px 0 88px}
  .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center}
  .hero h1 em{font-style:normal; color:var(--green)}
  .hero .lead{font-size:1.22rem; color:var(--ink-soft); margin-top:22px; max-width:30em}
  .hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}
  .store{
    display:inline-flex; align-items:center; gap:12px; text-decoration:none;
    background:var(--ink); color:#fff; border-radius:14px; padding:11px 20px 11px 18px;
    transition:transform .15s ease;
  }
  .store:hover{transform:translateY(-2px)}
  .store small{display:block; font-size:.68rem; line-height:1.2; opacity:.75; letter-spacing:.02em}
  .store strong{display:block; font-size:1.02rem; line-height:1.25; font-weight:600}
  .hero-note{margin-top:18px; font-size:.95rem; color:var(--ink-soft)}

  /* ---------- SIGNATURE: the verdict card ---------- */
  .verdict{
    background:#fff; border:1px solid var(--line); border-radius:28px;
    box-shadow:0 24px 60px -30px rgba(39,80,10,.45); padding:28px; position:relative;
  }
  .verdict-head{display:flex; align-items:flex-start; gap:18px}
  .verdict-head h3{font-family:var(--body); font-weight:700; font-size:1.5rem; line-height:1.2}
  .verdict-head .meta{color:var(--ink-soft); font-size:1rem}
  .smiley-badge{
    margin-left:auto; flex:0 0 auto; width:74px; text-align:center;
  }
  .smiley-badge .disc{
    width:74px; height:74px; border-radius:50%; display:grid; place-items:center;
  }
  .smiley-badge .label{display:block; font-size:.82rem; font-weight:600; margin-top:6px}
  .verdict-note{
    margin-top:22px; border-radius:16px; padding:16px 18px;
    display:flex; gap:12px; align-items:flex-start; font-size:1rem;
  }
  .verdict-note strong{display:block; font-weight:700}
  .verdict-ings{margin-top:18px; font-size:.98rem; color:var(--ink-soft)}
  .verdict-ings b{color:var(--ink); font-weight:600}
  .verdict-dots{display:flex; gap:8px; margin-top:24px}
  .verdict-dots button{
    width:26px; height:8px; border-radius:99px; border:0; background:var(--green-mid);
    cursor:pointer; padding:0; transition:background .2s
  }
  .verdict-dots button[aria-pressed="true"]{background:var(--green)}
  .tone-good  {background:var(--green-light); color:var(--green)}
  .tone-maybe {background:var(--amber-bg);   color:var(--amber-fg)}
  .tone-bad   {background:var(--red-bg);     color:var(--red-fg)}

  /* ---------- generic sections ---------- */
  section.band{padding:84px 0}
  .band-soft{background:var(--green-light)}
  .band-grey{background:var(--grey-bg)}
  .section-head{max-width:34em; margin-bottom:44px}
  .section-head p{color:var(--ink-soft); margin-top:14px; font-size:1.1rem}

  /* how it works */
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
  .step{background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:28px}
  .band-soft .step{border-color:transparent}
  .step .icon{
    width:52px; height:52px; border-radius:50%; background:var(--green-light);
    display:grid; place-items:center; margin-bottom:18px;
  }
  .band-soft .step .icon{background:var(--green-light)}
  .step h3{font-family:var(--body); font-weight:700; font-size:1.15rem; margin-bottom:8px}
  .step p{color:var(--ink-soft); font-size:1rem}

  /* smiley legend */
  .legend{display:grid; gap:12px; max-width:760px}
  .legend-row{
    display:flex; gap:18px; align-items:center; border-radius:16px; padding:16px 20px;
  }
  .legend-row .txt strong{display:block; font-weight:700; font-size:1.08rem}
  .legend-row .txt span{font-size:1rem}
  .disclaimer{
    display:flex; gap:14px; align-items:flex-start; background:var(--amber-bg); color:var(--amber-fg);
    border-radius:16px; padding:18px 20px; margin-top:26px; max-width:760px; font-weight:600;
  }

  /* latest update teaser */
  .teaser{
    display:grid; grid-template-columns:auto 1fr auto; gap:34px; align-items:center;
    background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:34px;
  }
  .teaser .stamp{
    background:var(--green); color:#fff; border-radius:16px; padding:16px 18px; text-align:center; min-width:104px;
  }
  .teaser .stamp b{display:block; font-family:var(--display); font-size:1.9rem; font-weight:800; line-height:1; letter-spacing:-.02em}
  .teaser .stamp span{display:block; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase}
  .teaser h3{margin-bottom:8px}
  .teaser p{color:var(--ink-soft); font-size:1.02rem}
  .tag{
    display:inline-block; background:var(--green-light); color:var(--green-dark);
    border-radius:var(--r-pill); padding:3px 12px; font-size:.8rem; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px;
  }

  /* download band */
  .download{
    background:var(--green-light); border:1px solid var(--green-mid);
    border-radius:28px; padding:56px; text-align:center; position:relative; overflow:hidden;
  }
  .download h2{color:var(--green-dark); position:relative}
  .download .eyebrow{position:relative}
  .download p{color:#4A6636; margin:16px auto 30px; max-width:34em; font-size:1.1rem; position:relative}
  .download .stores{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative}
  .download .leaf-mark{
    position:absolute; right:-40px; bottom:-60px; width:230px; opacity:.16; pointer-events:none;
  }
  .download .fineprint{
    margin-top:26px; font-size:.95rem; color:#5C7749; position:relative;
  }

  /* ---------- updates page ---------- */
  .page-head{padding:64px 0 40px; border-bottom:1px solid var(--line)}
  .page-head p{color:var(--ink-soft); font-size:1.15rem; margin-top:16px; max-width:36em}
  .posts{padding:8px 0 88px}
  /* The header is sticky and 76px tall, so a deep-linked post needs room
     above it or scrollIntoView tucks its title underneath. */
  details.post{border-bottom:1px solid var(--line); padding:6px 0; scroll-margin-top:92px}
  details.post summary{
    list-style:none; cursor:pointer; display:grid; grid-template-columns:130px 1fr 32px;
    gap:24px; align-items:baseline; padding:28px 0;
  }
  details.post summary::-webkit-details-marker{display:none}
  .post .date{color:var(--ink-soft); font-size:.95rem; font-variant-numeric:tabular-nums}
  .post .title{font-family:var(--display); font-size:1.32rem; font-weight:700; line-height:1.25; letter-spacing:-.015em}
  .post .version{
    display:inline-block; margin-left:12px; vertical-align:middle;
    background:var(--green-light); color:var(--green-dark); border-radius:var(--r-pill);
    padding:2px 11px; font-family:var(--body); font-size:.78rem; font-weight:700; letter-spacing:.05em;
  }
  .post .chev{
    justify-self:end; align-self:center; width:32px; height:32px; border-radius:50%;
    background:var(--green-light); display:grid; place-items:center; transition:transform .25s ease;
  }
  details.post[open] .chev{transform:rotate(180deg)}
  .post-body{
    padding:0 0 34px; margin-left:154px; max-width:44em; color:#333;
  }
  .post-body p + p{margin-top:14px}
  .post-body ul{margin:14px 0 0; padding-left:20px}
  .post-body li{margin-bottom:8px}
  .post-body li::marker{color:var(--green)}

  /* long-form prose pages (privacy, user agreement) reuse .post-body without
     the accordion's left gutter */
  .post-body.prose{margin-left:0; padding-top:36px}
  .post-body.prose h3{
    font-family:var(--display); font-size:1.18rem; font-weight:700;
    margin:30px 0 8px; letter-spacing:-.01em; color:var(--ink);
  }

  /* the app is not in the stores yet: same badge, visibly not a link */
  .store-soon{
    cursor:default; opacity:.72; border-style:dashed;
  }
  .store-soon:hover{transform:none; box-shadow:none}

  /* empty state — the mockup has none; no new visual language, just prose */
  .posts-empty{
    padding:44px 0 8px; color:var(--ink-soft); font-size:1.08rem; max-width:36em;
  }

  /* ---------- footer ---------- */
  footer{background:var(--grey-bg); padding:56px 0 40px; margin-top:0}
  .foot-grid{display:flex; gap:32px; flex-wrap:wrap; align-items:flex-start}
  .foot-grid .brand{margin-bottom:10px}
  .foot-links{margin-left:auto; display:flex; gap:44px; flex-wrap:wrap}
  .foot-links h4{
    font-family:var(--body); font-size:.82rem; font-weight:700; letter-spacing:.14em;
    text-transform:uppercase; color:var(--green); margin:0 0 12px;
  }
  .foot-links a{display:block; color:var(--ink); text-decoration:none; font-size:1rem; margin-bottom:8px}
  .foot-links a:hover{color:var(--green); text-decoration:underline}
  .foot-bottom{
    border-top:1px solid var(--line); margin-top:40px; padding-top:22px;
    display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
    color:var(--ink-soft); font-size:.92rem;
  }

  /* page switching (stand-in for Blazor routing) */
  .page{display:none}
  .page.active{display:block}

  @media (max-width:880px){
    .hero-grid{grid-template-columns:1fr; gap:44px}
    .steps{grid-template-columns:1fr}
    .teaser{grid-template-columns:1fr; gap:22px; text-align:left}
    .teaser .stamp{justify-self:start}
    details.post summary{grid-template-columns:1fr 32px; gap:12px}
    .post .date{grid-column:1/-1; margin-bottom:-14px}
    .post-body{margin-left:0}
    .download{padding:40px 24px; border-radius:20px}
    nav .btn{display:none}
  }
  @media (prefers-reduced-motion:reduce){
    *{transition:none !important; animation:none !important}
    html{scroll-behavior:auto}
  }

  /* ---------- Blazor runtime chrome ----------
     Carried over from the template's app.css, restyled in the site's own colours.
     #blazor-error-ui MUST stay display:none — it is shown by Blazor itself. */
  #blazor-error-ui{
    background:var(--amber-bg); color:var(--amber-fg);
    bottom:0; left:0; right:0; display:none; position:fixed; z-index:1000;
    padding:.7rem 1.25rem; box-shadow:0 -1px 2px rgba(0,0,0,.2);
    font-family:var(--body); font-size:.95rem;
  }
  #blazor-error-ui .dismiss{cursor:pointer; position:absolute; right:.75rem; top:.5rem}
  #blazor-error-ui .reload{color:var(--amber-fg); text-decoration:underline}

  .loading-progress{
    position:relative; display:block; width:8rem; height:8rem; margin:20vh auto 1rem auto;
  }
  .loading-progress circle{
    fill:none; stroke:var(--green-light); stroke-width:.6rem;
    transform-origin:50% 50%; transform:rotate(-90deg);
  }
  .loading-progress circle:last-child{
    stroke:var(--green);
    stroke-dasharray:calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition:stroke-dasharray .05s ease-in-out;
  }
  .loading-progress-text{
    position:absolute; text-align:center; inset:calc(20vh + 3.25rem) 0 auto .2rem;
    font-family:var(--body); font-weight:700; color:var(--ink-soft);
  }
  .loading-progress-text:after{content:var(--blazor-load-percentage-text, "Laden")}