/* =========================================================
   CreatorRun
   Helle Aurora-Flaeche, Instagram-Verlauf als Akzent,
   grosse Rundungen, schwebende Karten.
   Mobil zuerst. Haltepunkte: 600 / 900 / 1200
   ========================================================= */

:root{
  /* Aurora-Grundtoene */
  --mint:#BEE2EA;
  --cream:#FDFBF7;
  --peach:#F9F0E2;
  --blush:#F8E7F1;
  --lilac:#EEE6F8;

  --paper:#FBFAFC;
  --card:#FFFFFF;
  --card-2:#F5F2FA;

  --ink:#181425;
  --ink-2:#4B4460;
  --muted:#7E7794;
  --line:#EBE5F3;
  --line-2:#D9D1E8;

  /* Akzent: der Instagram-Verlauf */
  --b1:#833AB4;
  --b2:#C13584;
  --b3:#E1306C;
  --b4:#F56040;
  --brand:linear-gradient(118deg,var(--b1) 0%,var(--b2) 48%,var(--b3) 82%,var(--b4) 100%);
  --brand-soft:#F6EAF6;
  --brand-ink:#9B2E8E;

  --ok:#1F7A5C;   --ok-soft:#DFF3EA;
  --warn:#9A6B0F; --warn-soft:#FAEEDA;
  --stop:#C0392B; --stop-soft:#FBE6E3;

  --r-sm:12px;
  --r:18px;
  --r-lg:28px;
  --r-xl:36px;
  --pill:999px;

  --sh-1:0 1px 2px rgba(40,20,70,.04), 0 4px 14px rgba(40,20,70,.05);
  --sh-2:0 2px 6px rgba(40,20,70,.05), 0 14px 34px rgba(40,20,70,.08);
  --sh-3:0 2px 8px rgba(40,20,70,.06), 0 18px 44px rgba(40,20,70,.10), 0 40px 80px rgba(40,20,70,.07);
  --sh-brand:0 8px 22px rgba(193,53,132,.26);

  --font:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  --wrap:1180px;
  --gap:clamp(1rem,3vw,1.6rem);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --mint:#12303A; --cream:#191527; --peach:#2A1F2B; --blush:#2C1930; --lilac:#221A33;
    --paper:#12101C; --card:#1B1729; --card-2:#241E35;
    --ink:#F0ECF7; --ink-2:#C3BCD4; --muted:#928BA6;
    --line:#2E2740; --line-2:#413857;
    --brand-soft:#2E1733; --brand-ink:#F09BD4;
    --ok:#5FC79C;   --ok-soft:#13301F;
    --warn:#DCA84B; --warn-soft:#2F2410;
    --stop:#EC8377; --stop-soft:#331813;
    --sh-1:0 1px 2px rgba(0,0,0,.4);
    --sh-2:0 2px 6px rgba(0,0,0,.45), 0 14px 34px rgba(0,0,0,.4);
    --sh-3:0 2px 8px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.45), 0 40px 80px rgba(0,0,0,.35);
    --sh-brand:0 8px 22px rgba(193,53,132,.4);
  }
}
:root[data-theme="dark"]{
  --mint:#12303A; --cream:#191527; --peach:#2A1F2B; --blush:#2C1930; --lilac:#221A33;
  --paper:#12101C; --card:#1B1729; --card-2:#241E35;
  --ink:#F0ECF7; --ink-2:#C3BCD4; --muted:#928BA6;
  --line:#2E2740; --line-2:#413857;
  --brand-soft:#2E1733; --brand-ink:#F09BD4;
  --ok:#5FC79C;   --ok-soft:#13301F;
  --warn:#DCA84B; --warn-soft:#2F2410;
  --stop:#EC8377; --stop-soft:#331813;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 2px 6px rgba(0,0,0,.45), 0 14px 34px rgba(0,0,0,.4);
  --sh-3:0 2px 8px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.45), 0 40px 80px rgba(0,0,0,.35);
  --sh-brand:0 8px 22px rgba(193,53,132,.4);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation-duration:.01ms !important; transition-duration:.01ms !important} }

body{
  margin:0; color:var(--ink); font-family:var(--font);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; background:var(--paper); position:relative;
}
/* Die Aurora-Flaeche liegt hinter allem und scrollt mit */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(58% 44% at 6% 2%,   var(--mint) 0%, transparent 62%),
    radial-gradient(46% 38% at 96% 14%, var(--blush) 0%, transparent 66%),
    radial-gradient(52% 44% at 84% 88%, var(--peach) 0%, transparent 68%),
    radial-gradient(48% 40% at 14% 92%, var(--lilac) 0%, transparent 66%),
    var(--cream);
}

img,video,svg{max-width:100%; height:auto; display:block}
button,input,select,textarea{font:inherit; color:inherit}
a{color:var(--brand-ink); text-underline-offset:3px}
a:hover{color:var(--b3)}
:focus-visible{outline:2.5px solid var(--b2); outline-offset:2px; border-radius:6px}

h1,h2,h3,h4{font-weight:600; line-height:1.14; letter-spacing:-.028em; text-wrap:balance; margin:0 0 .5em}
h1{font-size:clamp(2.3rem,6.6vw,4.15rem); font-weight:600; line-height:1.06}
h2{font-size:clamp(1.75rem,4.6vw,2.85rem)}
h3{font-size:clamp(1.15rem,2.5vw,1.42rem); letter-spacing:-.02em}
h4{font-size:1.02rem; font-weight:700; letter-spacing:-.01em}
p{margin:0 0 1rem}
.lead{font-size:clamp(1.05rem,2.3vw,1.3rem); color:var(--ink-2); line-height:1.55; text-wrap:pretty}
.small{font-size:.88rem}
.muted{color:var(--muted)}
strong{font-weight:700}

/* Das hervorgehobene Wort im Aufmacher */
.grad{
  background:var(--brand); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}

/* ---------- Aufbau ---------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2rem)}
.wrap-narrow{max-width:780px}
section.band{padding-block:clamp(3rem,8vw,5.5rem)}
/* Sanfte weisse Flaeche fuer abgesetzte Abschnitte */
section.band.veil{background:rgba(255,255,255,.55); backdrop-filter:blur(6px)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) section.band.veil{background:rgba(27,23,41,.5)} }
:root[data-theme="dark"] section.band.veil{background:rgba(27,23,41,.5)}
.center{text-align:center}
.center .lead{margin-inline:auto; max-width:56ch}
.stack{display:flex; flex-direction:column; gap:var(--gap)}
.eyebrow{
  display:inline-block; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; margin:0 0 .9rem; background:var(--brand);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.section-head{max-width:58ch; margin-bottom:clamp(1.8rem,4vw,2.8rem)}
.center .section-head{margin-inline:auto}

/* ---------- Knoepfe ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.6rem; border-radius:var(--pill); border:1.5px solid transparent;
  font-weight:600; font-size:.98rem; text-decoration:none; cursor:pointer; min-height:50px;
  transition:transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s ease, background .16s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background-image:var(--brand); background-color:var(--b2); color:#fff;
  background-clip:padding-box;          /* sonst scheint der Verlauf unter dem Rahmen durch */
  box-shadow:var(--sh-brand);
}
.btn-primary:hover{color:#fff; transform:translateY(-2px); box-shadow:0 12px 30px rgba(193,53,132,.34); filter:saturate(1.12) brightness(1.05)}
.btn-ghost{background:rgba(255,255,255,.82); color:var(--ink); border-color:rgba(24,20,37,.16); backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:var(--b2); color:var(--ink); transform:translateY(-2px); background:#fff}
.btn-quiet{background:var(--card-2); color:var(--ink)}
.btn-quiet:hover{background:var(--line); color:var(--ink)}
.btn-block{width:100%}
.btn-row{display:flex; flex-wrap:wrap; gap:.7rem}
.center .btn-row{justify-content:center}

/* ---------- Kopfzeile als schwebende Kapsel ---------- */
.site-header{position:sticky; top:0; z-index:60; padding:.7rem 0 .2rem}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:rgba(255,255,255,.82); backdrop-filter:saturate(150%) blur(14px);
  border:1px solid rgba(255,255,255,.7); border-radius:var(--pill);
  box-shadow:var(--sh-2); padding:.5rem .6rem .5rem 1.15rem; min-height:58px; min-width:0;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .header-inner{background:rgba(27,23,41,.82); border-color:rgba(255,255,255,.08)}
}
:root[data-theme="dark"] .header-inner{background:rgba(27,23,41,.82); border-color:rgba(255,255,255,.08)}

.brand{display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--ink);
       font-weight:800; font-size:1.22rem; letter-spacing:-.035em; flex:0 0 auto; white-space:nowrap}
.brand .mark{
  width:30px; height:30px; border-radius:9px; background:var(--brand); flex:0 0 auto;
  display:grid; place-items:center; color:#fff; font-size:.74rem; font-weight:800; letter-spacing:-.02em;
}
.brand:hover{color:var(--ink)}

.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px;
  border:0; border-radius:var(--pill); background:var(--card-2); cursor:pointer; flex:0 0 auto;
}
.nav-toggle span{display:block; width:18px; height:2px; background:var(--ink); position:relative; border-radius:2px}
.nav-toggle span::before,.nav-toggle span::after{content:""; position:absolute; left:0; width:18px; height:2px;
  background:var(--ink); border-radius:2px; transition:transform .2s ease}
.nav-toggle span::before{top:-6px} .nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

.site-nav{display:none}
.site-nav.open{
  display:block; position:absolute; left:clamp(1.1rem,4vw,2rem); right:clamp(1.1rem,4vw,2rem); top:calc(100% + .5rem);
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-3); padding:.9rem 1.1rem 1.2rem;
}
.site-nav ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.1rem}
/* :not(.btn) ist noetig - sonst schlaegt diese Regel (Klasse + Element)
   die Knopfregeln (nur Klasse) und faerbt den CTA schwarz. */
.site-nav a:not(.btn){display:block; padding:.75rem .3rem; text-decoration:none; color:var(--ink);
            font-weight:500; border-bottom:1px solid var(--line)}
.site-nav a:not(.btn)[aria-current="page"]{background:var(--brand); -webkit-background-clip:text; background-clip:text;
            color:transparent; -webkit-text-fill-color:transparent; font-weight:700}
.site-nav .nav-cta{display:flex; flex-direction:column; gap:.6rem; margin-top:1rem}
.site-nav .nav-cta a:not(.btn){border-bottom:0; padding:0}

/* ---------- Karten ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
      padding:clamp(1.2rem,3vw,1.8rem); box-shadow:var(--sh-1)}
.card-hover{transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease}
.card-hover:hover{transform:translateY(-4px); box-shadow:var(--sh-2)}
.grid{display:grid; gap:var(--gap)}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr 1fr}

/* Grosse Pastellkachel - der Baustein aus dem Vorbild */
.tile{
  border-radius:var(--r-xl); padding:clamp(1.5rem,4vw,2.6rem);
  background:linear-gradient(150deg,var(--cream),var(--lilac) 55%,var(--blush));
  border:1px solid rgba(255,255,255,.6); box-shadow:var(--sh-2); overflow:hidden; position:relative;
}
.tile.mint{background:linear-gradient(150deg,var(--cream),#E3F1F4 60%,var(--mint))}
.tile.peach{background:linear-gradient(150deg,var(--cream),#FBEEDF 55%,var(--peach))}
.tile.deep{
  background:linear-gradient(145deg,#C9AEDE,#B79FD6 40%,#9FB6DC 100%);
  border-color:rgba(255,255,255,.35);
}
.tile-pair{display:grid; gap:1rem; align-items:stretch}

/* ---------- Plaketten ---------- */
.pill{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; letter-spacing:.02em;
  font-weight:700; padding:.32rem .68rem; border-radius:var(--pill);
  background:var(--card-2); color:var(--ink-2); white-space:nowrap;
}
.pill.ok{background:var(--ok-soft); color:var(--ok)}
.pill.warn{background:var(--warn-soft); color:var(--warn)}
.pill.stop{background:var(--stop-soft); color:var(--stop)}
.pill.brand{background:var(--brand-soft); color:var(--brand-ink)}
.pill.solid{background:var(--brand); color:#fff}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto}
.pill.solid::before{background:rgba(255,255,255,.85)}

/* ---------- Hinweis-Kapsel im Aufmacher ---------- */
.hero-note{
  display:inline-flex; align-items:center; gap:.55rem; padding:.45rem 1rem .45rem .6rem;
  background:rgba(255,255,255,.78); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.8); border-radius:var(--pill);
  font-size:.86rem; color:var(--ink-2); box-shadow:var(--sh-1); margin-bottom:1.5rem;
}
.hero-note .dot{width:8px; height:8px; border-radius:50%; background:var(--brand); flex:0 0 auto;
                box-shadow:0 0 0 4px var(--brand-soft)}

/* ---------- Bildflaeche: weiche Farbfelder mit Korn ---------- */
.shot{position:relative; overflow:hidden; background:var(--card-2); --a:#C13584; --b:#F56040; isolation:isolate}
.shot::before{
  content:""; position:absolute; inset:-18%;
  background:
    radial-gradient(48% 42% at 24% 26%, color-mix(in srgb,var(--b) 92%, #fff) 0%, transparent 62%),
    radial-gradient(52% 48% at 76% 68%, color-mix(in srgb,var(--a) 88%, #000 6%) 0%, transparent 66%),
    radial-gradient(70% 60% at 60% 18%, color-mix(in srgb,var(--b) 58%, #fff 32%) 0%, transparent 70%),
    linear-gradient(152deg, color-mix(in srgb,var(--a) 82%, #000 4%), color-mix(in srgb,var(--b) 76%, #000 8%));
  filter:blur(2px) saturate(114%); z-index:-2;
}
.shot::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.17; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.shot.ratio-45{aspect-ratio:4/5}
.shot.ratio-11{aspect-ratio:1/1}
.shot.ratio-916{aspect-ratio:9/16}
.shot .overlay-text{
  position:absolute; left:0; right:0; bottom:0; padding:1rem .95rem 1.05rem;
  font-weight:700; color:#fff; font-size:1.08rem; line-height:1.2; letter-spacing:-.02em;
  text-shadow:0 1px 14px rgba(0,0,0,.45);
  background:linear-gradient(to top, rgba(0,0,0,.52), rgba(0,0,0,.16) 55%, transparent);
}
.shot .corner{
  position:absolute; top:.6rem; right:.6rem; background:rgba(255,255,255,.92); color:#181425;
  font-size:.64rem; font-weight:800; letter-spacing:.03em; padding:.24rem .55rem;
  border-radius:var(--pill); text-transform:uppercase;
}

/* ---------- Beitragskarte ---------- */
.post{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
      overflow:hidden; box-shadow:var(--sh-3); width:100%}
.post-top{display:flex; align-items:center; gap:.6rem; padding:.8rem .9rem; min-width:0}
.post-av{width:34px; height:34px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  font-weight:800; font-size:.76rem; color:#fff; background:var(--brand);
  box-shadow:0 0 0 2px var(--card), 0 0 0 3.5px var(--brand-soft)}
.post-who{display:flex; flex-direction:column; line-height:1.25; min-width:0}
.post-who b{font-size:.88rem; font-weight:800; letter-spacing:-.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.post-who span{font-size:.72rem; color:var(--muted); display:flex; align-items:center; gap:.3rem;
               overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.post-net{width:7px; height:7px; border-radius:50%; flex:0 0 auto; background:var(--b3)}
.post-more{margin-left:auto; color:var(--muted); letter-spacing:.1em; font-size:1rem; line-height:1}
.post-acts{display:flex; align-items:center; gap:.9rem; padding:.7rem .9rem .1rem; color:var(--ink)}
.post-acts svg{width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.7}
.post-acts .heart{color:var(--b3); fill:var(--b3); stroke:var(--b3)}
.post-acts .spacer{margin-left:auto}
.post-body{padding:.35rem .9rem 1rem}
.post-body .likes{font-size:.8rem; font-weight:800; margin:0 0 .3rem}
.post-body p{font-size:.86rem; margin:0 0 .3rem; color:var(--ink-2); line-height:1.45}
.post-body p b{color:var(--ink); font-weight:800}
.post-body .tags{font-size:.82rem; color:var(--brand-ink); margin:0}
.post-body .stamp{font-size:.7rem; color:var(--muted); letter-spacing:.02em; margin:.55rem 0 0; display:block; font-weight:600}

/* ---------- Versetzter Beitragsstreifen ----------
   Schmal und nach unten ausgeblendet: wirkt wie ein Feed, der weitergeht. */
.mosaic-frame{
  max-width:680px; margin-inline:auto; position:relative;
  max-height:clamp(340px,52vw,520px); overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, #000 62%, rgba(0,0,0,.45) 84%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 62%, rgba(0,0,0,.45) 84%, transparent 100%);
}
.mosaic{display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; align-items:start}
.mosaic .col{display:flex; flex-direction:column; gap:.55rem}
.mosaic .col:nth-child(2){margin-top:1.6rem}
.mosaic .col:nth-child(3){margin-top:.7rem}
.mosaic .cell{border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-2); position:relative; background:var(--card)}
.mosaic .cell .shot{border-radius:var(--r) var(--r) 0 0}
.mosaic .cell .overlay-text{font-size:.72rem !important; padding:.5rem .55rem .55rem}
/* Kleine Fusszeile je Kachel - macht aus der Farbflaeche einen Beitrag */
.mosaic .foot{display:flex; align-items:center; gap:.35rem; padding:.4rem .55rem .5rem; font-size:.66rem;
              color:var(--muted); font-weight:700}
.mosaic .foot svg{width:12px; height:12px; fill:var(--b3); stroke:var(--b3); stroke-width:1.6; flex:0 0 auto}
.mosaic .foot .net{padding:0; background:none; border:0; box-shadow:none; margin-left:auto; font-size:.62rem}

/* ---------- Der gestapelte Feed ---------- */
.feed-stage{position:relative; padding:1.5rem .35rem 2rem; display:flex; flex-direction:column;
            align-items:center; gap:1.2rem}
.feed-stage .post{max-width:320px}
.feed-stage .post:nth-child(1){transform:rotate(-1.8deg)}
.feed-stage .post:nth-child(2){transform:rotate(1.5deg)}

/* ---------- Kennzahlen ---------- */
.figures{display:grid; gap:.8rem; grid-template-columns:1fr}
.figure{background:rgba(255,255,255,.7); backdrop-filter:blur(10px);
        border:1px solid rgba(255,255,255,.75); border-radius:var(--r-lg);
        padding:1.3rem 1.4rem; box-shadow:var(--sh-1)}
.figure .n{font-size:clamp(1.75rem,4vw,2.3rem); font-weight:700; letter-spacing:-.045em; line-height:1.1;
           display:block; margin-bottom:.35rem; font-variant-numeric:tabular-nums; text-wrap:balance}
.figure .n em{font-style:normal; background:var(--brand); -webkit-background-clip:text; background-clip:text;
              color:transparent; -webkit-text-fill-color:transparent}
.figure .k{font-size:.9rem; color:var(--ink-2); display:block}

/* ---------- Kanal-Reihe ---------- */
.nets{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center}
.center .nets{justify-content:center}
.net{display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .9rem;
     background:rgba(255,255,255,.78); backdrop-filter:blur(8px);
     border:1px solid rgba(255,255,255,.8); border-radius:var(--pill);
     font-size:.87rem; font-weight:600; box-shadow:var(--sh-1)}
.net i{width:10px; height:10px; border-radius:50%; display:block; flex:0 0 auto}
.net.soon{opacity:.6}
.net .small{font-weight:500}

/* ---------- Wochenboard ---------- */
.board-frame{background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl);
             box-shadow:var(--sh-3); overflow:hidden}
.board-bar{display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap;
           padding:.95rem 1.15rem; border-bottom:1px solid var(--line); background:var(--card-2)}
.board-bar .title{font-weight:700; font-size:.95rem; letter-spacing:-.02em}
.board-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; padding:1rem; scrollbar-width:thin}
.board{display:grid; grid-template-columns:repeat(7,minmax(152px,1fr)); gap:.55rem; min-width:min-content}
.day{border:1px solid var(--line); border-radius:var(--r); padding:.6rem .55rem .7rem;
     background:var(--card); display:flex; flex-direction:column; gap:.45rem; box-shadow:var(--sh-1);
     transition:transform .18s ease, box-shadow .18s ease}
.day:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.day.is-done{background:var(--card-2); opacity:.94}
.day.is-done .shot{filter:saturate(.5) brightness(.99)}
.day .dow{font-size:.7rem; letter-spacing:.03em; color:var(--muted); font-weight:700}
.day .shot{border-radius:var(--r-sm)}
.day .corner{font-size:.55rem; padding:.16rem .4rem; top:.4rem; right:.4rem}
.day .when{font-size:.74rem; color:var(--ink-2); font-variant-numeric:tabular-nums; font-weight:600}
.day .dots{display:flex; gap:3px}
.day .dots i{width:8px; height:8px; border-radius:50%; background:var(--line-2)}
.day .dots i.on{background:var(--brand)}

/* ---------- Preistafeln ---------- */
.plans{display:grid; gap:1rem; grid-template-columns:1fr}
.plan{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.6rem;
      display:flex; flex-direction:column; gap:.9rem; box-shadow:var(--sh-1); position:relative}
.plan.featured{border-color:transparent; box-shadow:var(--sh-2), 0 0 0 2px var(--b2)}
.plan.featured::after{
  content:"Meist gewählt"; position:absolute; top:-12px; left:1.6rem; background:var(--brand); color:#fff;
  font-size:.66rem; letter-spacing:.04em; padding:.3rem .7rem; border-radius:var(--pill); font-weight:700;
}
.plan .name{font-size:1.3rem; font-weight:700; margin:0; letter-spacing:-.03em}
.plan .price{font-size:2.4rem; font-weight:700; letter-spacing:-.045em; line-height:1; margin:0}
.plan .price small{font-size:.85rem; font-weight:500; color:var(--muted); letter-spacing:0}
.plan ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; font-size:.93rem; flex:1}
.plan ul li{display:flex; gap:.6rem; align-items:flex-start; color:var(--ink-2)}
.plan ul li::before{content:""; width:16px; height:16px; flex:0 0 auto; margin-top:.22rem; border-radius:50%;
                    background:var(--brand); opacity:.22}

/* ---------- Tabellen ---------- */
.table-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--card); box-shadow:var(--sh-1)}
table.data{width:100%; border-collapse:collapse; font-size:.9rem; min-width:30rem}
table.data th,table.data td{text-align:left; padding:.8rem 1rem; border-bottom:1px solid var(--line)}
table.data th{font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); font-weight:700; white-space:nowrap}
table.data tbody tr:last-child td{border-bottom:0}
table.data td.num,table.data th.num{text-align:right; font-variant-numeric:tabular-nums}

/* ---------- Formulare ---------- */
.field{display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem}
.field label{font-size:.88rem; font-weight:700; color:var(--ink-2)}
.field .hint{font-size:.82rem; color:var(--muted)}
.input{width:100%; padding:.85rem 1rem; border:1.5px solid var(--line-2); border-radius:var(--r);
       background:var(--card); color:var(--ink); min-height:50px; transition:border-color .15s ease, box-shadow .15s ease}
.input:focus{border-color:var(--b2); outline:none; box-shadow:0 0 0 4px var(--brand-soft)}
.input.err{border-color:var(--stop)}
textarea.input{border-radius:var(--r)}
.err-text{color:var(--stop); font-size:.85rem; margin-top:.25rem}
.notice{padding:.9rem 1.1rem; border-radius:var(--r); font-size:.92rem; margin-bottom:1.2rem; border:1px solid}
.notice-ok{background:var(--ok-soft); border-color:var(--ok); color:var(--ok)}
.notice-err{background:var(--stop-soft); border-color:var(--stop); color:var(--stop)}
.notice-info{background:var(--brand-soft); border-color:var(--b2); color:var(--brand-ink)}
.code-input{font-family:var(--font-mono); font-size:1.9rem; letter-spacing:.5em; text-align:center;
            padding:.95rem .5rem .95rem 1.1rem; font-variant-numeric:tabular-nums}

/* ---------- Fusszeile ---------- */
.site-footer{background:rgba(255,255,255,.6); backdrop-filter:blur(10px);
             border-top:1px solid var(--line); padding-block:clamp(2.5rem,6vw,3.5rem) 2rem; margin-top:2rem}
.footer-grid{display:grid; gap:1.9rem; grid-template-columns:1fr}
.footer-col h4{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
               margin:0 0 .8rem; font-weight:700}
.footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem}
.footer-col a{color:var(--ink-2); text-decoration:none; font-size:.93rem}
.footer-col a:hover{color:var(--b3)}
.footer-base{margin-top:2rem; padding-top:1.3rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap;
             gap:.6rem 1.5rem; align-items:center; justify-content:space-between; font-size:.85rem; color:var(--muted)}

.skip-link{position:absolute; left:-9999px; top:0; background:var(--brand); color:#fff; padding:.7rem 1.2rem;
           z-index:100; border-radius:0 0 var(--r) 0}
.skip-link:focus{left:0}

details.card summary{cursor:pointer; font-weight:700; font-size:1.03rem; letter-spacing:-.02em}
details.card summary::marker{color:var(--b2)}
hr.soft{border:0; border-top:1px solid var(--line); margin:2rem 0}

/* ---------- Einblenden beim Scrollen ---------- */
@media (prefers-reduced-motion: no-preference){
  .js .rise{opacity:0; transform:translateY(18px); transition:opacity .65s ease, transform .65s cubic-bezier(.2,.7,.3,1)}
  .js .rise.seen{opacity:1; transform:none}
  .rise-2{transition-delay:.09s} .rise-3{transition-delay:.18s} .rise-4{transition-delay:.27s}
  @keyframes float-1{from{transform:rotate(-1.8deg) translateY(0)} to{transform:rotate(-1.8deg) translateY(-7px)}}
  @keyframes float-2{from{transform:rotate(1.5deg) translateY(0)}  to{transform:rotate(1.5deg) translateY(-9px)}}
  .feed-stage .post:nth-child(1){animation:float-1 5.8s ease-in-out .4s infinite alternate}
  .feed-stage .post:nth-child(2){animation:float-2 4.8s ease-in-out infinite alternate}
}

/* =========================================================
   Tablet hochkant
   ========================================================= */
@media (min-width:600px){
  body{font-size:17.5px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .plans{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .figures{grid-template-columns:repeat(2,1fr)}
  .tile-pair{grid-template-columns:1fr 1fr}

  .feed-stage{flex-direction:row; align-items:flex-start; justify-content:center; gap:.9rem; padding-inline:.6rem}
  .feed-stage .post{width:calc(50% - 1.5rem); max-width:none; flex:0 0 auto; min-width:0}
  .feed-stage .post:nth-child(1){transform:rotate(-2.2deg) translateY(1.2rem)}
  .feed-stage .post:nth-child(2){transform:rotate(1.8deg)}
  @media (prefers-reduced-motion: no-preference){
    @keyframes float-1t{from{transform:rotate(-2.2deg) translateY(1.2rem)} to{transform:rotate(-2.2deg) translateY(.75rem)}}
    @keyframes float-2t{from{transform:rotate(1.8deg) translateY(0)}       to{transform:rotate(1.8deg) translateY(-8px)}}
    .feed-stage .post:nth-child(1){animation-name:float-1t}
    .feed-stage .post:nth-child(2){animation-name:float-2t}
  }
}

/* =========================================================
   Tablet quer
   ========================================================= */
@media (min-width:900px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
  .plans{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}
  .figures{grid-template-columns:repeat(4,1fr)}
  .split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,3.5rem); align-items:center}
  .split.reverse > *:first-child{order:2}
  .tile-pair{gap:1.2rem}
}

/* Die Kapsel fasst Logo, fuenf Menuepunkte und zwei Knoepfe erst ab hier.
   Darunter bleibt das aufklappbare Menue - sonst laeuft der Knopf ueber den Rand. */
@media (min-width:1040px){
  .site-nav{display:block !important; position:static; background:none; border:0; box-shadow:none; padding:0; min-width:0}
  .site-nav ul{flex-direction:row; align-items:center; gap:.05rem; flex-wrap:nowrap}
  .site-nav a:not(.btn){border-bottom:0; padding:.55rem .7rem; border-radius:var(--pill); font-size:.92rem;
              font-weight:600; white-space:nowrap}
  .site-nav a:not(.btn):hover{background:var(--card-2)}
  .site-nav .nav-cta{flex-direction:row; margin-top:0; margin-left:.45rem; gap:.4rem; flex:0 0 auto}
  .site-nav .nav-cta .btn{padding:.6rem 1.1rem; min-height:44px; font-size:.9rem; white-space:nowrap}
  .nav-toggle{display:none}
  .header-inner{min-height:64px}
}

@media (min-width:1200px){
  body{font-size:18px}
  .site-nav ul{gap:.1rem}
  .site-nav a:not(.btn){padding:.55rem .85rem; font-size:.94rem}
  .site-nav .nav-cta{margin-left:.6rem; gap:.45rem}
  .site-nav .nav-cta .btn{padding:.6rem 1.25rem; font-size:.92rem}
  .plans.plans-5{grid-template-columns:repeat(5,1fr)}
  .board{grid-template-columns:repeat(7,1fr)}
  .board-scroll{overflow-x:visible}
}

/* Beitragskarte innerhalb einer Kachel: begrenzen, sonst sprengt sie die Kachel */
.tile .post{max-width:300px; margin-inline:auto}
.tile .feed-stage{padding:0}
.tile .feed-stage .post{max-width:300px; width:auto}
@media (min-width:600px){
  .tile .feed-stage{flex-direction:column; align-items:center}
  .tile .feed-stage .post{width:100%; max-width:290px}
  .tile .feed-stage .post:nth-child(1){transform:rotate(-1.6deg)}
}