/* =========================================================================
   Prototyp-spezifische Bausteine (nur auf den Homepage-Prototypen geladen)
   Nutzt ebenfalls nur Tokens aus tokens.css.
   ========================================================================= */

/* Kompakter Hero (weniger Platz für Versand) */
.hero--compact{min-height:clamp(360px,48vh,460px)}

/* Eyebrow in Pfeilerfarbe */
.eyebrow--gift{color:var(--pillar-gift)}
.eyebrow--event{color:var(--pillar-event)}

/* Pfeiler-Tags in ihren Farben */
.tag-post{background:var(--pillar-post)}
.tag-gift{background:var(--pillar-gift)}
.tag-event{background:var(--pillar-event)}

/* ---------- Prototyp 2: Anlass-Finder (Tabs) ---------- */
.occasion{background:var(--surface-2);padding:var(--space-8) 0 var(--space-7)}
.occasion__head{text-align:center;max-width:720px;margin:0 auto var(--space-6)}
.occasion__head h1{font-size:var(--fs-2xl);margin:.1em 0 .3em}
.occasion__head p{color:var(--muted);font-size:var(--fs-md)}
.occasion__tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:960px;margin:0 auto}
.otab{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-lg);
  padding:24px 22px;cursor:pointer;text-align:left;transition:.18s var(--ease);position:relative;overflow:hidden}
.otab:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--brand-200)}
.otab.active{border-color:var(--brand);box-shadow:var(--shadow-brand);background:var(--brand-50)}
.otab__ico{width:52px;height:52px;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;
  color:#fff;margin-bottom:14px}
.otab h3{font-size:1.3rem;margin-bottom:.2em}
.otab p{font-size:.9rem;color:var(--muted);margin:0}
.occasion__panel{padding-top:var(--space-7)}
.occasion__panel[hidden]{display:none}
.panel-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:var(--space-6)}

/* ---------- Prototyp 3: Bento / Magazin ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:16px}
.btile{position:relative;border-radius:var(--radius-lg);overflow:hidden;display:flex;align-items:flex-end;
  color:#fff;isolation:isolate;box-shadow:var(--shadow-sm)}
.btile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s var(--ease)}
.btile:hover img{transform:scale(1.06)}
.btile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,14,9,.05),rgba(20,14,9,.8))}
.btile__body{padding:22px}
.btile__tag{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 11px;border-radius:var(--radius-pill);margin-bottom:10px;color:#fff}
.btile h3{color:#fff;font-size:1.35rem;line-height:1.1;margin-bottom:.2em}
.btile.lg h3{font-size:2rem}
.btile p{color:rgba(255,255,255,.9);font-size:.9rem;margin:.2em 0 0;max-width:34ch}
.btile--hero{grid-column:span 2;grid-row:span 2}
.btile--wide{grid-column:span 2}
.btile--tall{grid-row:span 2}
/* farbige Info-Kachel (kein Bild) */
.btile--solid{background:linear-gradient(135deg,var(--brand-500),var(--brand-700));align-items:center;text-align:center}
.btile--solid::after{display:none}
.btile--solid .btile__body{width:100%}
.btile--solid .amatic{font-size:1.8rem;display:block}

/* Magazin-Band je Pfeiler */
.band{padding:var(--space-8) 0}
.band__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:var(--space-5);flex-wrap:wrap}
.band__head h2{font-size:var(--fs-xl)}
.band--gift{background:color-mix(in srgb,var(--pillar-gift) 7%,var(--bg))}
.band--event{background:color-mix(in srgb,var(--pillar-event) 8%,var(--bg))}

/* Event-Liste (kompakt, für alle Prototypen nutzbar) */
.event-list{display:flex;flex-direction:column;gap:14px}
.event-row{display:flex;gap:18px;align-items:center;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:14px;box-shadow:var(--shadow-sm);transition:.18s}
.event-row:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.event-row img{width:120px;height:88px;object-fit:cover;border-radius:var(--radius-sm);flex:none}
.event-row__body{flex:1;min-width:0}
.event-row__body h3{font-size:1.05rem;line-height:1.25}
.event-row__meta{font-size:.85rem;color:var(--muted);margin-top:2px}
.event-row__price{font-weight:800;white-space:nowrap;color:var(--pillar-event)}

@media(max-width:900px){
  .occasion__tabs{grid-template-columns:1fr}
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}
  .btile--hero{grid-column:span 2}
}
@media(max-width:560px){
  .bento{grid-template-columns:1fr;grid-auto-rows:150px}
  .btile--hero,.btile--wide{grid-column:span 1}
  .event-row img{width:84px;height:70px}
}

/* =========================================================================
   MUTIGE PROTOTYPEN 4–6  (brechen mit dem Standard-Shop-Schema)
   Logo ersetzt den Marken-Schriftzug im Hero.
   ========================================================================= */

/* Logo im Hero (statt Typo "Marianne's Flammkuchen") */
.hero__logo{width:min(430px,74%);height:auto;margin-bottom:8px;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.45))}
.logo-white{filter:brightness(0) invert(1) drop-shadow(0 6px 22px rgba(0,0,0,.45))}

/* ---------- Prototyp 4: „Drei Türen" (Vollbild-Split) ---------- */
.doors{display:flex;gap:4px;height:clamp(520px,calc(100vh - 132px),840px);background:var(--dark)}
.door{position:relative;flex:1;overflow:hidden;display:flex;flex-direction:column;align-items:center;
  justify-content:center;color:#fff;text-align:center;padding:24px;isolation:isolate;
  transition:flex .45s var(--ease);cursor:pointer}
.door:hover{flex:2}
.door__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s var(--ease)}
.door:hover .door__bg{transform:scale(1.07)}
.door::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,14,9,.35),rgba(20,14,9,.8))}
.door__logo{width:118px;margin-bottom:22px;position:relative;z-index:1}
.door__tag{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 14px;border-radius:var(--radius-pill);margin-bottom:14px;color:#fff}
.door__label{font-family:var(--font-heading);font-weight:800;font-size:clamp(1.7rem,2.6vw,2.6rem);line-height:1.05}
.door__sub{color:rgba(255,255,255,.85);max-width:26ch;margin:8px auto 0;font-size:.95rem}
.door .btn{margin-top:20px;opacity:0;transform:translateY(12px);transition:.35s var(--ease)}
.door:hover .btn{opacity:1;transform:none}

/* ---------- Prototyp 5: „Poster / Zine" (oversized, schräg) ---------- */
.poster{position:relative;overflow:hidden;text-align:center;color:#fff;padding:var(--space-9) 24px;
  min-height:82vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 20%,var(--brand-400),var(--brand-600) 60%,var(--brand-700))}
.poster::before{content:"#flammkuchenliebe";position:absolute;top:-4%;left:50%;transform:translateX(-50%) rotate(-4deg);
  font-family:var(--font-accent);font-size:clamp(6rem,22vw,20rem);color:rgba(255,255,255,.09);white-space:nowrap;pointer-events:none}
.poster__logo{width:min(460px,82%);margin-bottom:22px;position:relative;z-index:2}
.poster__slogan{position:relative;z-index:2;font-family:var(--font-accent);font-weight:700;
  font-size:clamp(2.6rem,8vw,5.6rem);line-height:.92;max-width:15ch}
.poster__ribbons{position:relative;z-index:2;display:flex;gap:22px;flex-wrap:wrap;justify-content:center;margin-top:44px}
.ribbon{background:#fff;color:var(--ink);font-family:var(--font-heading);font-weight:800;font-size:1.15rem;
  padding:16px 30px;border-radius:8px;box-shadow:var(--shadow-lg);transform:rotate(-3deg);transition:.2s var(--ease)}
.ribbon:nth-child(2){transform:rotate(2.5deg)}
.ribbon:nth-child(3){transform:rotate(-1.5deg)}
.ribbon:hover{transform:scale(1.07) rotate(0);color:var(--brand-700)}
.ribbon.gift{background:var(--pillar-gift);color:#fff}
.ribbon.event{background:var(--pillar-event);color:#fff}

/* ---------- Prototyp 6: „Tageskarte / Tafel" (Chalkboard) ---------- */
.board{background:
   radial-gradient(80% 60% at 50% 0%,rgba(255,132,0,.12),transparent),
   #221913;color:#f3ece3;padding:var(--space-8) 0 0}
.board__inner{max-width:880px;margin:0 auto;padding:0 24px;text-align:center}
.board__logo{width:min(340px,66%);margin:0 auto 6px}
.board__sub{font-family:var(--font-accent);font-size:clamp(2rem,5vw,3.4rem);color:var(--brand-300);line-height:1}
.menu-board{border:2px dashed rgba(243,236,227,.28);border-radius:var(--radius-lg);padding:20px 28px;margin:26px 0}
.menu-item{display:flex;align-items:center;gap:14px;padding:16px 4px;text-align:left}
.menu-item+.menu-item{border-top:1px dotted rgba(243,236,227,.2)}
.menu-item__ico{width:44px;height:44px;border-radius:var(--radius-pill);flex:none;display:flex;align-items:center;justify-content:center;color:#fff}
.menu-item h3{font-family:var(--font-heading);font-weight:800;font-size:1.35rem;color:#fff}
.menu-item p{font-size:.9rem;color:rgba(243,236,227,.7);margin:2px 0 0}
.menu-item .go{margin-left:auto;color:var(--brand-300);font-weight:800;white-space:nowrap}
.marquee{overflow:hidden;white-space:nowrap;background:var(--brand);color:#fff;padding:10px 0;font-weight:800;letter-spacing:.02em;margin-top:var(--space-7)}
.marquee__track{display:inline-block;padding-left:100%;animation:marq 22s linear infinite}
.marquee__track span{margin:0 26px}
@keyframes marq{to{transform:translateX(-100%)}}

@media(max-width:760px){
  .doors{flex-direction:column;height:auto}
  .door{min-height:220px}
  .door:hover{flex:1}
  .door .btn{opacity:1;transform:none}
}

/* =========================================================================
   PROTOTYPEN 7–9  (weitere eigenständige Richtungen)
   ========================================================================= */

/* ---------- Prototyp 7: Karussell (jede Welt ein Slide) ---------- */
.pcaro{position:relative;min-height:clamp(480px,66vh,640px);overflow:hidden;background:var(--dark)}
.pcaro__slide{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--ease);display:flex;align-items:center}
.pcaro__slide.active{opacity:1}
.pcaro__bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.pcaro__slide::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(20,14,9,.72),rgba(20,14,9,.28) 65%)}
.pcaro__inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 24px;color:#fff;width:100%}
.pcaro__logo{width:200px;filter:brightness(0) invert(1);margin-bottom:14px}
.pcaro__tag{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 13px;border-radius:var(--radius-pill);color:#fff;margin-bottom:12px}
.pcaro h2{font-size:var(--fs-2xl);color:#fff;max-width:16ch;line-height:1.02}
.pcaro p{max-width:44ch;color:rgba(255,255,255,.9);margin:12px 0 22px}
.pcaro__dots{position:absolute;bottom:22px;left:0;right:0;display:flex;gap:10px;justify-content:center;z-index:4}
.pcaro__dots button{width:40px;height:5px;border:none;border-radius:3px;background:rgba(255,255,255,.4);cursor:pointer;transition:.2s}
.pcaro__dots button.active{background:var(--brand);width:56px}

/* ---------- Prototyp 8: Medaillons (runde Bild-Buttons) ---------- */
.circles-hero{text-align:center;padding:var(--space-8) 0 var(--space-2)}
.circles-hero .logo{width:min(330px,64%);margin:0 auto 6px}
.circles-hero .sub{font-family:var(--font-accent);font-size:clamp(1.8rem,4.5vw,2.8rem);color:var(--brand-600)}
.circles{display:flex;gap:36px;justify-content:center;flex-wrap:wrap;padding:var(--space-6) 0 var(--space-8)}
.circle{width:250px;text-align:center}
.circle .disc{display:block;width:230px;height:230px;border-radius:50%;overflow:hidden;margin:0 auto 18px;
  position:relative;box-shadow:var(--shadow-md);border:6px solid #fff;transition:.25s var(--ease);isolation:isolate}
.circle .disc:hover{transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow-lg)}
.circle .disc img{width:100%;height:100%;object-fit:cover}
.circle .disc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(20,14,9,.4))}
.circle .tagdot{display:inline-block;padding:4px 13px;border-radius:var(--radius-pill);color:#fff;
  font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.circle h3{font-family:var(--font-heading);font-size:1.4rem}
.circle p{color:var(--muted);font-size:.9rem;margin:.25em 0 14px}

/* ---------- Prototyp 9: Zeitung / Editorial ---------- */
.paper{background:#fbf8f1;padding:var(--space-6) 0 var(--space-8)}
.masthead{text-align:center}
.masthead .logo{width:min(360px,70%);margin:0 auto 8px}
.masthead .rule{display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:7px 0;margin-top:8px}
.paper-grid{display:grid;grid-template-columns:2fr 1fr;gap:30px;margin-top:26px}
.lead .kicker,.side .kicker{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-700);font-weight:800}
.lead img{width:100%;height:clamp(240px,34vw,380px);object-fit:cover;border-radius:6px}
.lead h2{font-family:var(--font-heading);font-size:clamp(2rem,4vw,3.1rem);margin:12px 0 8px;line-height:1.03}
.lead .cols{column-count:2;column-gap:26px;color:var(--ink-soft)}
.lead .cols p{margin:0 0 1em}
.side{display:flex;flex-direction:column;gap:22px}
.side .story{border-top:3px double var(--ink);padding-top:14px}
.side .story img{width:100%;height:150px;object-fit:cover;border-radius:6px;margin-bottom:10px}
.side .story h3{font-family:var(--font-heading);font-size:1.4rem;margin:.1em 0 .3em}
.side .story p{color:var(--ink-soft);font-size:.92rem;margin:0 0 12px}

@media(max-width:820px){
  .paper-grid{grid-template-columns:1fr}
  .lead .cols{column-count:1}
}

/* ---------- Prototyp 10: Sticky-Split (Logo-Spalte fest, Welten scrollen) ---------- */
.sticky-split{display:grid;grid-template-columns:.92fr 1.08fr}
.ss-aside{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));align-self:start;
  background:var(--dark);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:56px 48px}
.ss-aside .logo{width:min(300px,82%);filter:brightness(0) invert(1);margin-bottom:22px}
.ss-aside .lead{font-family:var(--font-accent);font-size:clamp(1.8rem,3vw,2.6rem);color:var(--brand-300);line-height:1;margin-bottom:26px}
.ss-nav a{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.7);font-family:var(--font-heading);
  font-weight:700;font-size:1.5rem;padding:12px 0 12px 16px;border-left:3px solid transparent;transition:.18s}
.ss-nav a:hover{color:#fff;border-color:var(--brand);padding-left:22px}
.ss-nav .n{font-size:.8rem;color:var(--brand-300);font-weight:800}
.ss-main{}
.ss-panel{position:relative;min-height:calc(100vh - var(--header-h));display:flex;align-items:flex-end;
  color:#fff;isolation:isolate;overflow:hidden}
.ss-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s var(--ease)}
.ss-panel:hover img{transform:scale(1.05)}
.ss-panel::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,14,9,.1),rgba(20,14,9,.78))}
.ss-panel__body{padding:44px}
.ss-panel__tag{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 13px;border-radius:var(--radius-pill);color:#fff;margin-bottom:14px}
.ss-panel h3{font-size:clamp(2rem,3.4vw,3rem);color:#fff;line-height:1.02;margin-bottom:.2em}
.ss-panel p{max-width:40ch;color:rgba(255,255,255,.9);margin:0 0 20px}
@media(max-width:820px){
  .sticky-split{grid-template-columns:1fr}
  .ss-aside{position:static;height:auto;padding:40px 24px}
  .ss-panel{min-height:66vh}
}