:root{
    --bg: #FFFFFF;
    --bg-alt: #F5F6F8;
    --surface: #FFFFFF;
    --ink: #17181C;
    --ink-soft: #52565E;
    --muted: #8A8E97;
    --border: #E7E8EC;

    --green: #74bf02;
    --green-dark: #5c9902;
    --green-tint: #F0F8E4;
    --indigo: #2d23e8;
    --indigo-dark: #221acc;
    --indigo-tint: #ECEBFD;

    --font-display: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --radius-s: 10px;
    --radius-m: 16px;
    --radius-l: 28px;
    --shadow-card: 0 1px 2px rgba(18,20,15,.04), 0 12px 32px -12px rgba(18,20,15,.14);
    --ease: cubic-bezier(.22,.61,.36,1);
  }

  *,*::before,*::after{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    *,*::before,*::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  }

  body{
    margin:0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
  }

  h1,h2,h3,h4{
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0;
  }
  h1{ font-weight: 800; }

  p{ margin:0; }
  ul{ list-style:none; margin:0; padding:0; }
  a{ color: inherit; text-decoration: none; }
  button{ font-family: inherit; cursor:pointer; }
  svg{ display:block; }

  img, svg { max-width: 100%; }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  summary:focus-visible{
    outline: 2.5px solid var(--indigo);
    outline-offset: 3px;
    border-radius: 4px;
  }

  .eyebrow{
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--indigo);
  }

  .wrap{
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding: 13px 22px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    border: 1.5px solid transparent;
    transition: transform .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
    white-space: nowrap;
  }
  .btn:hover{ transform: translateY(-1px); }
  .btn:active{ transform: translateY(0); }

  .btn--primary{ background: var(--ink); color: #fff; }
  .btn--primary:hover{ background: #262b1f; }

  .btn--accent{ background: var(--green); color: var(--ink); }
  .btn--accent:hover{ background: var(--green-dark); color:#fff; }

  .btn--ghost{ background: transparent; color: var(--ink); border-color: var(--border); }
  .btn--ghost:hover{ border-color: var(--ink); }

  .btn--block{ width: 100%; }
  .btn svg{ width: 16px; height: 16px; }

  /* ---------- Header ---------- */
  .site-header{
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(247,250,243,.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
  }
  .header-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height: 76px;
    gap: 24px;
  }
  .logo{
    display:flex;
    align-items:center;
    gap:9px;
    font-family: var(--font-display);
    font-weight:700;
    font-size: 17px;
    letter-spacing: -.01em;
  }
  .logo-mark{
    width: 30px; height: 30px;
    border-radius: 8px;
    background: linear-gradient(155deg, var(--green) 0%, var(--indigo) 130%);
    display:flex; align-items:center; justify-content:center;
    color:#fff;
    flex-shrink: 0;
  }
  .logo-mark svg{ width: 16px; height:16px; }

  .primary-nav{ display:none; }
  .primary-nav ul{ display:flex; align-items:center; gap: 34px; }
  .primary-nav a{
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink-soft);
    transition: color .15s;
  }
  .primary-nav a:hover{ color: var(--ink); }

  .header-actions{ display:flex; align-items:center; gap: 12px; }
  .header-actions .btn{ padding: 10px 18px; font-size: 14px; }
  .nav-toggle{ display:flex; background:none; border:1px solid var(--border); border-radius: 8px; padding:8px; }
  .nav-toggle svg{ width:20px; height:20px; }

  @media (min-width: 900px){
    .primary-nav{ display:block; }
    .nav-toggle{ display:none; }
  }

  /* Mobile-Menü (Klapp-Nav via .is-open, siehe layouts/public.twig) */
  @media (max-width: 899px){
    .primary-nav.is-open{
      display:block;
      position:absolute;
      top: 76px;
      left:0; right:0;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: 20px 24px;
      box-shadow: var(--shadow-card);
    }
    .primary-nav.is-open ul{ flex-direction: column; align-items:flex-start; gap: 16px; }
  }

  /* ---------- Hero ---------- */
  .hero{
    padding: 64px 0 40px;
    position: relative;
    overflow: hidden;
  }
  .hero::before{
    content:"";
    position:absolute;
    top: -180px; right: -160px;
    width: 520px; height: 520px;
    background: radial-gradient(circle, var(--green-tint) 0%, transparent 70%);
    z-index:0;
  }
  .hero-grid{
    position: relative;
    z-index:1;
    display:grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
  }
  @media (min-width: 980px){
    .hero-grid{ grid-template-columns: 1.05fr .95fr; gap: 56px; }
  }

  .hero-copy h1{
    font-size: clamp(36px, 5.4vw, 58px);
    margin-bottom: 20px;
  }
  .hero-copy .eyebrow{ margin-bottom: 16px; display:inline-block; }
  .hero-copy .lede{
    font-size: 18px;
    color: var(--ink-soft);
    max-width: 46ch;
    margin-bottom: 32px;
  }
  .accent-underline{
    background-image: linear-gradient(var(--green) 0, var(--green) 100%);
    background-repeat: no-repeat;
    background-size: 100% .32em;
    background-position: 0 88%;
    padding: 0 .05em;
  }

  .hero-stats{
    display:flex;
    flex-wrap: wrap;
    gap: 28px 36px;
    margin-top: 8px;
  }
  .hero-stats .stat-num{
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
  }
  .hero-stats .stat-label{
    font-size: 13px;
    color: var(--muted);
  }

  /* ---------- Signup card (hero focal point) ---------- */
  .signup-card{
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    padding: 34px 30px;
    box-shadow: var(--shadow-card);
    z-index: 2;
  }
  .signup-card::before{
    content:"";
    position:absolute;
    inset: -1px;
    border-radius: var(--radius-l);
    padding: 1px;
    background: linear-gradient(135deg, var(--green) 0%, var(--indigo) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .5;
    pointer-events: none;
  }

  .signup-card__head{ margin-bottom: 22px; }
  .signup-card__head h2{ font-size: 21px; margin-bottom: 6px; }
  .signup-card__head p{ font-size: 14px; color: var(--muted); }

  .field{ margin-bottom: 16px; }
  .field label{
    display:block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
  }
  .field input, .field select{
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius-s);
    border: 1.5px solid var(--border);
    background: var(--bg);
    font-size: 14.5px;
    font-family: inherit;
    color: var(--ink);
    transition: border-color .15s;
  }
  .field input:focus, .field select:focus{
    border-color: var(--indigo);
    outline: none;
  }
  .field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }

  .signup-card .btn--accent{ margin-top: 6px; }

  .form-footnote{
    text-align:center;
    font-size: 13px;
    color: var(--muted);
    margin-top: 16px;
  }
  .form-footnote a{ color: var(--indigo); font-weight: 600; }
  .form-footnote a:hover{ text-decoration: underline; }

  .signup-card__divider{
    display:flex;
    align-items:center;
    gap: 12px;
    margin: 18px 0;
    font-size: 12px;
    color: var(--muted);
  }
  .signup-card__divider::before,
  .signup-card__divider::after{
    content:"";
    flex:1;
    height:1px;
    background: var(--border);
  }

  .progress-track{
    height: 6px; border-radius: 999px; background: rgba(255,255,255,.15); overflow:hidden;
  }
  .progress-fill{ height:100%; background: var(--green); border-radius: 999px; width: 70%; }

  /* ---------- Trust strip ---------- */
  .trust-strip{
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 28px 0;
    margin-top: 60px;
  }
  .trust-strip .wrap{
    display:flex;
    flex-wrap: wrap;
    align-items:center;
    justify-content: center;
    gap: 28px 48px;
  }
  .trust-strip p{
    font-size: 12.5px;
    font-family: var(--font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    width: 100%;
    text-align: center;
    margin-bottom: 4px;
  }
  .trust-logo{
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--ink-soft);
    opacity: .55;
  }

  /* ---------- Ticker (signature element) ---------- */
  .ticker-section{
    padding: 46px 0;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
  }
  .ticker-mask{
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .ticker-track{
    display:flex;
    gap: 16px;
    width: max-content;
    animation: ticker-scroll 38s linear infinite;
  }
  @media (prefers-reduced-motion: reduce){
    .ticker-track{ animation: none; }
  }
  @keyframes ticker-scroll{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
  }
  .shift-chip{
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    padding: 12px 16px;
    width: 236px;
  }
  .shift-chip__icon{
    width: 36px; height:36px; border-radius: 9px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .shift-chip__icon svg{ width:17px; height:17px; }
  .shift-chip.is-green .shift-chip__icon{ background: var(--green-tint); color: var(--green-dark); }
  .shift-chip.is-indigo .shift-chip__icon{ background: var(--indigo-tint); color: var(--indigo); }
  .shift-chip__time{ font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
  .shift-chip__task{ font-size: 13.5px; font-weight: 600; margin: 2px 0 6px; }
  .shift-chip .progress-track{ background: var(--border); }
  .shift-chip.is-green .progress-fill{ background: var(--green); }
  .shift-chip.is-indigo .progress-fill{ background: var(--indigo); }

  /* ---------- Section shell ---------- */
  .section{ padding: 92px 0; }
  .section--tight{ padding: 72px 0; }
  .section-head{
    max-width: 620px;
    margin: 0 auto 52px;
    text-align: center;
  }
  .section-head h2{ font-size: clamp(28px, 3.6vw, 40px); margin: 14px 0 14px; }
  .section-head p{ font-size: 16px; color: var(--ink-soft); }
  .section-head .eyebrow{ display:inline-block; }

  /* ---------- Rechtstexte (Impressum, Datenschutz, ...) ---------- */
  .legal-content h1{ margin-bottom: 8px; }
  .legal-content h2{
    font-size: 20px;
    margin: 44px 0 14px;
  }
  .legal-content h2:first-of-type{ margin-top: 32px; }
  .legal-content p{
    margin-bottom: 16px;
    line-height: 1.7;
    color: var(--ink-soft);
  }
  .legal-content ul{
    margin: 0 0 16px;
    padding-left: 22px;
    list-style: disc;
  }
  .legal-content ul li{
    margin-bottom: 8px;
    line-height: 1.7;
    color: var(--ink-soft);
  }
  .legal-content a{ color: var(--indigo); }

  /* ---------- Features ---------- */
  .bento{
    display:grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  @media (min-width: 700px){ .bento{ grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1020px){ .bento{ grid-template-columns: repeat(3, 1fr); } }

  .feature-card{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    padding: 26px 24px;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
  }
  .feature-card:hover{
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
    border-color: transparent;
  }
  .feature-card__icon{
    width: 42px; height:42px;
    border-radius: 11px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom: 18px;
  }
  .feature-card__icon svg{ width:20px; height:20px; }
  .feature-card:nth-child(3n+1) .feature-card__icon{ background: var(--green-tint); color: var(--green-dark); }
  .feature-card:nth-child(3n+2) .feature-card__icon{ background: var(--indigo-tint); color: var(--indigo); }
  .feature-card:nth-child(3n+3) .feature-card__icon{ background: var(--bg-alt); color: var(--ink); }

  .feature-card h3{ font-size: 17px; margin-bottom: 8px; }
  .feature-card p{ font-size: 14.5px; color: var(--ink-soft); }

  /* ---------- How it works ---------- */
  .steps{
    display:grid;
    grid-template-columns: 1fr;
    gap: 40px;
    counter-reset: step;
  }
  @media (min-width: 860px){ .steps{ grid-template-columns: repeat(3, 1fr); } }
  .step{ position: relative; padding-left: 0; }
  .step-num{
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--indigo);
    display:flex;
    align-items:center;
    gap: 10px;
    margin-bottom: 14px;
  }
  .step-num::before{
    content: counter(step, decimal-leading-zero);
    counter-increment: step;
    font-size: 13px;
  }
  .step-num::after{
    content:"";
    height:1px;
    flex:1;
    background: var(--border);
  }
  .step h3{ font-size: 19px; margin-bottom: 8px; }
  .step p{ font-size: 14.5px; color: var(--ink-soft); }

  /* ---------- Testimonial ---------- */
  .testimonial{
    background: var(--ink);
    color: #fff;
    border-radius: var(--radius-l);
    padding: 56px clamp(24px, 6vw, 72px);
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .testimonial::after{
    content:"";
    position:absolute;
    width: 340px; height: 340px;
    background: radial-gradient(circle, rgba(116,191,2,.28), transparent 70%);
    top: -120px; left: -80px;
  }
  .testimonial blockquote{
    font-family: var(--font-display);
    font-size: clamp(20px, 2.6vw, 28px);
    font-weight: 600;
    line-height: 1.35;
    max-width: 760px;
    margin: 0 auto 26px;
    position: relative;
    z-index:1;
  }
  .testimonial-author{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 12px;
    position: relative;
    z-index:1;
  }
  .avatar-dot{
    width: 38px; height:38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--green), var(--indigo));
    flex-shrink:0;
  }
  .testimonial-author .name{ font-weight: 600; font-size: 14.5px; }
  .testimonial-author .role{ font-size: 13px; color: #B9C0AE; }

  /* ---------- CTA band ---------- */
  .cta-band{
    background: linear-gradient(120deg, var(--indigo) 0%, var(--indigo-dark) 100%);
    border-radius: var(--radius-l);
    padding: 56px clamp(24px, 6vw, 72px);
    color: #fff;
    display:grid;
    gap: 28px;
    align-items:center;
    grid-template-columns: 1fr;
    text-align:center;
  }
  @media (min-width: 780px){
    .cta-band{ grid-template-columns: 1.3fr auto; text-align:left; }
  }
  .cta-band h2{ font-size: clamp(26px, 3.4vw, 34px); margin-bottom: 10px; color:#fff; }
  .cta-band p{ color: #D6D4FA; font-size: 15.5px; max-width: 52ch; }
  .cta-band .btn--accent:hover{ background:#fff; color: var(--indigo); }
  .cta-actions{ display:flex; flex-wrap:wrap; gap: 12px; justify-content:center; }
  @media (min-width: 780px){ .cta-actions{ justify-content:flex-end; } }

  /* ---------- FAQ ---------- */
  .faq-list{
    max-width: 760px;
    margin: 0 auto;
    display:flex;
    flex-direction: column;
    gap: 12px;
  }
  .faq-item{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    padding: 4px 22px;
  }
  .faq-item summary{
    list-style: none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 16px;
    padding: 18px 0;
    font-weight: 600;
    font-size: 15.5px;
    cursor: pointer;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary svg{
    width: 18px; height:18px;
    flex-shrink:0;
    color: var(--muted);
    transition: transform .2s var(--ease);
  }
  .faq-item[open] summary svg{ transform: rotate(45deg); color: var(--indigo); }
  .faq-item p{
    font-size: 14.5px;
    color: var(--ink-soft);
    padding-bottom: 20px;
    max-width: 62ch;
  }

  /* ---------- Footer ---------- */
  .site-footer{
    background: var(--bg-alt);
    border-top: 1px solid var(--border);
    padding: 64px 0 32px;
    margin-top: 40px;
  }
  .footer-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 48px;
  }
  @media (min-width: 760px){
    .footer-grid{ grid-template-columns: 1.1fr repeat(4, 1fr); }
  }
  .footer-brand p{
    font-size: 14px;
    color: var(--ink-soft);
    margin: 14px 0 20px;
    max-width: 32ch;
  }
  .footer-social{ display:flex; gap: 10px; }
  .footer-social a{
    width: 34px; height:34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    transition: border-color .15s, color .15s;
  }
  .footer-social a:hover{ border-color: var(--ink); color: var(--indigo); }
  .footer-social svg{ width:15px; height:15px; }

  .footer-col h4{
    font-family: var(--font-body);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    margin-bottom: 16px;
  }
  .footer-col ul{ display:flex; flex-direction: column; gap: 11px; }
  .footer-col a{ font-size: 14.5px; color: var(--ink-soft); transition: color .15s; }
  .footer-col a:hover{ color: var(--indigo); }

  .footer-bottom{
    border-top: 1px solid var(--border);
    padding-top: 24px;
    display:flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    align-items:center;
    font-size: 13px;
    color: var(--muted);
  }
  .footer-bottom ul{ display:flex; flex-wrap:wrap; gap: 18px; }
  .footer-bottom a:hover{ color: var(--ink); }

  .visually-hidden{
    position:absolute; width:1px; height:1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  }

  /* ==========================================================
     Erweiterungen für die übrigen öffentlichen Seiten
     (Eintragen in Helferliste, Login, Kategorie-Übersicht, ...)
     Nutzt dieselben Design-Tokens wie oben.
     ========================================================== */

  :root{
    --red: #C6323A;
    --red-tint: #FBEAEB;
    --amber: #B7791F;
    --amber-tint: #FCF3E2;
  }

  .simple-page{
    padding: 56px 0 80px;
    min-height: calc(100vh - 76px - 260px);
    display: flex;
    align-items: center;
  }
  .simple-page .wrap{ width: 100%; }

  .auth-shell{
    max-width: 480px;
    margin: 0 auto;
  }
  .auth-shell .page-logo{
    display:flex;
    justify-content:center;
    margin-bottom: 22px;
  }
  .auth-shell .signup-card{ margin: 0; }

  .page-header{
    text-align:center;
    margin-bottom: 28px;
  }
  .page-header h1{ font-size: clamp(24px, 3.4vw, 32px); margin-bottom: 10px; }
  .page-header p{ color: var(--ink-soft); font-size: 15px; }

  .alert{
    display:flex;
    align-items:flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-s);
    font-size: 14px;
    margin-bottom: 18px;
    border: 1px solid transparent;
  }
  .alert svg{ width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
  .alert--success{ background: var(--green-tint); color: var(--green-dark); border-color: rgba(116,191,2,.35); }
  .alert--error{ background: var(--red-tint); color: var(--red); border-color: rgba(198,50,58,.3); }
  .alert--warning{ background: var(--amber-tint); color: var(--amber); border-color: rgba(183,121,31,.3); }

  .meta-row{
    display:flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    justify-content:center;
    font-size: 14px;
    color: var(--ink-soft);
    margin: 14px 0 22px;
  }
  .meta-row span{ display:inline-flex; align-items:center; gap: 7px; }
  .meta-row svg{ width: 16px; height: 16px; color: var(--indigo); flex-shrink:0; }

  .participant-list{
    display:flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content:center;
    margin: 18px 0 24px;
  }
  .participant-chip{
    display:inline-flex;
    align-items:center;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--ink-soft);
  }

  .field textarea{
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius-s);
    border: 1.5px solid var(--border);
    background: var(--bg);
    font-size: 14.5px;
    font-family: inherit;
    color: var(--ink);
    resize: vertical;
  }
  .field textarea:focus{ border-color: var(--indigo); outline: none; }

  .back-link{
    display:block;
    text-align:center;
    margin-top: 18px;
    font-size: 13.5px;
    color: var(--muted);
  }
  .back-link:hover{ color: var(--indigo); }

  .event-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  @media (min-width: 700px){ .event-grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1020px){ .event-grid{ grid-template-columns: repeat(3, 1fr); } }

  .event-card{
    display:flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    padding: 22px;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease);
  }
  .event-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-card); }
  .event-card h3{ font-size: 16.5px; margin-bottom: 4px; }
  .event-card .event-date{ font-size: 12.5px; font-family: var(--font-mono); color: var(--muted); margin-bottom: 14px; }
  .event-card .event-desc{ font-size: 13.5px; color: var(--ink-soft); margin-bottom: 18px; flex: 1; }
  .event-card .event-meta{ display:flex; justify-content:space-between; font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }

  /* ---------- SEO-Themenseiten: zentrierter Hero ohne Signup-Card ---------- */
  .hero--centered .wrap{ max-width: 780px; text-align:center; }
  .hero--centered .hero-copy .lede{ max-width: none; margin-left:auto; margin-right:auto; }
  .hero-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:8px; }

  .example-list{
    display:flex !important;
    flex-flow: row wrap;
    align-items:center;
    gap: 10px 12px;
    justify-content:center;
    margin: 32px 0 0;
    padding: 0;
    list-style:none;
  }
  .example-list li{
    display:inline-flex;
    align-items:center;
    gap: 7px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 9px 16px 9px 12px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-soft);
    box-shadow: 0 1px 2px rgba(18,20,15,.04);
  }
  .example-list li::before{
    content:"";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink:0;
  }

  .topic-links{
    display:flex;
    flex-wrap:wrap;
    gap: 10px;
    justify-content:center;
  }
  .topic-links a{
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 13.5px;
    color: var(--ink-soft);
    transition: border-color .15s, color .15s;
  }
  .topic-links a:hover{ border-color: var(--indigo); color: var(--indigo); }