/* WerDerRaum · Catering-Seiten (Wohnzimmer · Kulturraum · Arbeitsraum) — gemeinsame Gestaltung, 05.10.26 */
em, i, cite { font-style: normal; }
  :root {
    --ink:#000; --ink-soft:#2a2520; --paper:#f4efe6; --paper-2:#ebe3d3;
    --mute:#8a8174; --red:#8a1c20; --line:#d9cfba;
    --display:"Newsreader","Times New Roman",serif;
    --body:"Inter Tight",system-ui,sans-serif;
    --mono:"JetBrains Mono",ui-monospace,monospace;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body { background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  a { color: inherit; text-decoration: none; }
  ::selection { background: var(--red); color: var(--paper); }
  .wrap { max-width: 1060px; margin: 0 auto; padding: 0 32px; width: 100%; }

  /* top bar */
  .cat-bar { height: 4px; background: var(--red); }
  .cat-top { padding: 26px 0 0; }
  .cat-back { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--red); padding-bottom: 2px; }
  .cat-back:hover { color: var(--red); }

  /* hero */
  .cat-hero { padding: 146px 0 18px; position: relative; min-height: 600px; }
  .cat-hero .kicker, .cat-hero h1, .cat-hero .sub { position: relative; z-index: 2; }
  .cat-hero .kicker { font-family: var(--mono); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--red); display: inline-flex; align-items: center; gap: 14px; margin: 0 0 22px; }
  .cat-hero .kicker::after { content: ""; flex: 0 0 64px; height: 1px; background: color-mix(in oklab, var(--ink) 22%, transparent); }
  .cat-hero h1 { font-family: var(--display); font-weight: 500; line-height: 1.04; letter-spacing: -.022em; margin: 0; }
  .cat-hero h1 .l1 { display: block; font-size: clamp(19px, 3.1vw, 31px); font-weight: 400; color: var(--mute); letter-spacing: -.01em; margin: 0 0 6px; }
  .cat-hero h1 .l1 .em { color: var(--red); font-style: normal; }
  .cat-hero h1 .l2 { display: block; font-size: clamp(32px, 6vw, 60px); line-height: 1.05; color: var(--ink); animation: festGlow 2.6s ease-in-out infinite; }
  @keyframes festGlow { 0%, 100% { text-shadow: 0 0 0 rgba(184,166,115,0); } 50% { text-shadow: 0 0 26px rgba(184,166,115,0.6), 0 0 8px rgba(184,166,115,0.42); } }
  @media (prefers-reduced-motion: reduce) { .cat-hero h1 .l2 { animation: none; text-shadow: none; } }
  .cat-hero .sub { font-family: var(--display); font-size: clamp(13px, 1.3vw, 14px); line-height: 1.55; color: var(--ink-soft); margin: 24px 0 0; max-width: 70%; }
  @media (max-width: 900px) { .cat-hero .sub { white-space: normal; } }
  .hero-photo { position: absolute; top: 100px; right: 0; z-index: 0; width: 36%; max-width: 350px; aspect-ratio: 3 / 4; margin: 0; border: 0; overflow: hidden; -webkit-mask-image: none; mask-image: none; }
  .hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
  @media (max-width: 760px) {
    .cat-hero { min-height: 0; }
    .cat-hero .sub { max-width: 100%; font-size: 15.5px; }
    .hero-photo { position: static; width: 100%; max-width: 100%; aspect-ratio: 4 / 3; margin: 30px 0 0; opacity: 1; border: 1px solid var(--line); -webkit-mask-image: none; mask-image: none; }
  }

  /* filter bar */
  .filterbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 60px 0 0; position: sticky; top: 0; z-index: 20; background: var(--paper); padding: 16px 0 14px; }
  .filterbar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 40px; background: linear-gradient(var(--paper), transparent); pointer-events: none; }
  .filterbar .fl { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); margin-right: 6px; }
  .fbtn { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; padding: 9px 14px; cursor: pointer; background: transparent; border: 1px solid var(--line); color: var(--ink); transition: opacity .15s ease, border-color .15s ease, background .15s ease; }
  .fbtn .ct { color: var(--mute); margin-left: 7px; }
  .fbtn:hover { border-color: var(--red); }
  .fbtn--all.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
  .fbtn--cater.is-on { background: var(--red); border-color: var(--red); color: var(--paper); }
  .fbtn--cater.is-on .ct { color: color-mix(in oklab, var(--paper) 72%, transparent); }
  .fbtn--walk.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
  .fbtn--deliver.is-on { border-color: var(--red); color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
  .fbtn--deliver.is-on .ct { color: var(--red); }
  .fbtn--private.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .fbtn--private.is-on .ct { color: color-mix(in oklab, var(--paper) 72%, transparent); }
  .filterbar.filtered .fbtn:not(.is-on) { opacity: .45; }
  .fdiv { width: 2px; height: 26px; background: var(--ink); margin: 0 8px; flex: none; }
  @media (max-width: 640px) { .fdiv { display: none; } }

  /* order note */
  .cat-note { display: flex; align-items: flex-start; gap: 16px; border: 1px solid var(--line); border-left: 3px solid var(--red); background: var(--paper-2); padding: 18px 22px; margin: 30px 0 8px; }
  .cat-note .nk { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--red); white-space: nowrap; padding-top: 3px; }
  .cat-note p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); }
  .cat-note b { font-weight: 600; }

  .cat-info { border: 1px solid var(--line); background: var(--paper); margin: 40px 0 8px; padding: 30px 34px 34px; }
  .cat-info .cik { font-family: var(--mono); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--red); margin: 0 0 6px; }
  .cat-info h2 { font-family: var(--display); font-weight: 500; font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -.018em; margin: 0 0 22px; }
  .ci-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 40px; }
  .ci-item { display: flex; flex-direction: column; gap: 7px; }
  .ci-item .cil { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); display: inline-flex; align-items: center; gap: 9px; }
  .ci-item .cil::before { content: ""; width: 18px; height: 1px; background: var(--red); display: inline-block; }
  .ci-item p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
  .ci-item p strong { color: var(--ink); font-weight: 600; }
  @media (max-width: 1150px) { .cards { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 820px) { .ci-grid { grid-template-columns: 1fr; gap: 22px; } }

  /* CTA unten: handgeschriebene Einladung zum Ablauf */
  .to-ablauf { position: absolute; left: 0; bottom: 16px; z-index: 2; display: inline-flex; align-items: baseline; gap: 10px; font-family: "Caveat", cursive; color: var(--red); text-decoration: none; }
  .to-ablauf .hw { font-size: clamp(30px, 3.6vw, 44px); line-height: 1; -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); animation: handwrite 1.9s linear .6s forwards; }
  .to-ablauf .hw-ar { font-size: clamp(28px, 3.2vw, 40px); line-height: 1; opacity: 0; transform: translateX(-6px); animation: hwArrow .5s ease 2.5s forwards; }
  @keyframes handwrite { to { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } }
  @keyframes hwArrow { to { opacity: 1; transform: translateX(0); } }
  @media (max-width: 760px) { .to-ablauf { position: static; margin-top: 26px; } }
  @media (prefers-reduced-motion: reduce) { .to-ablauf .hw { -webkit-clip-path: none; clip-path: none; animation: none; } .to-ablauf .hw-ar { opacity: 1; transform: none; animation: none; } }

  /* accordion — intro als aufklappbare Menüpunkte */
  .acc { margin: 18px 0 8px; display: flex; flex-direction: column; gap: 12px; }
  .acc-item { border: 1px solid var(--line); background: var(--paper); transition: border-color .18s ease; }
  .acc-item.open { border-color: color-mix(in oklab, var(--red) 40%, var(--line)); }
  .acc-head { width: 100%; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 28px; }
  .acc-head:hover { background: color-mix(in oklab, var(--paper-2) 55%, transparent); }
  .acc-head-txt { display: flex; flex-direction: column; gap: 14px; }
  .acc-k { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--red); }
  .acc-t { font-family: var(--display); font-weight: 500; font-size: clamp(16px, 2.1vw, 22px); letter-spacing: -.018em; color: var(--ink); line-height: 1.05; }
  .acc-ico { position: relative; width: 22px; height: 22px; flex: none; }
  .acc-ico::before, .acc-ico::after { content: ""; position: absolute; background: var(--red); transition: opacity .3s ease, transform .3s ease; }
  .acc-ico::before { left: 2px; right: 2px; top: 50%; height: 1.5px; transform: translateY(-50%); }
  .acc-ico::after { top: 2px; bottom: 2px; left: 50%; width: 1.5px; transform: translateX(-50%); }
  .acc-item.open .acc-ico::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }
  .acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s ease; }
  .acc-item.open .acc-body { grid-template-rows: 1fr; }
  .acc-inner { overflow: hidden; }
  .acc-pad { padding: 4px 28px 30px; }
  .acc-lead { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 22px 0 0; white-space: nowrap; }
  @media (max-width: 900px) { .acc-lead { white-space: normal; } }
  .acc-lead b { color: var(--ink); font-weight: 600; }
  .acc-extra { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 40px 0 0; white-space: nowrap; }
  .acc-extra .gw { color: var(--red); font-weight: 600; }
  .acc-extra b { color: var(--ink); font-weight: 600; }
  @media (max-width: 900px) { .acc-extra { white-space: normal; } }

  /* steps grid (spiegelt ci-grid) */
  .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 40px; }
  .steps li { display: flex; gap: 16px; }
  .steps .sn { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--red); padding-top: 4px; flex: none; }
  .steps .st { display: flex; flex-direction: column; gap: 6px; }
  .steps .stl { font-family: var(--display); font-size: 19px; letter-spacing: -.01em; color: var(--ink); line-height: 1.1; }
  .steps .std { font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
  @media (max-width: 1150px) { .cards { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 820px) { .steps { grid-template-columns: 1fr; gap: 20px; } }

  /* group label */
  .group-label { display: flex; align-items: baseline; gap: 16px; margin: 73px 0 22px; }
  .filterbar + .group-label { margin-top: 40px; }
  .group-label .gt { font-family: var(--display); font-weight: 500; font-size: clamp(23px, 3vw, 31px); letter-spacing: -.015em; }
  .group-label .gm { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
  .group-label .ln { flex: 1; height: 1px; background: var(--line); }

  /* cards */
  .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .rcard { border: 1px solid var(--line); background: var(--paper); display: flex; flex-direction: column; transition: border-color .18s ease, transform .18s ease; }
  .rcard:hover { border-color: var(--red); transform: translateY(-2px); }
  .rcard image-slot, .rcard .rphoto { width: 100%; height: 212px; display: block; border-bottom: 1px solid var(--line); }
  .rcard .rphoto { object-fit: cover; background: var(--paper-2); }
  .rcard .rslider { width: 100%; height: 212px; display: block; border-bottom: 1px solid var(--line); position: relative; overflow: hidden; background: var(--paper-2); isolation: isolate; }
  .rcard .rslider .rslide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.8s ease; filter: saturate(0.9) contrast(1.05) sepia(0.06) brightness(0.985); }
  .rcard .rslider .rslide.is-active { opacity: 1; }
  .rcard .rslider--solo .rslide { opacity: 1; }
  .rcard .rslider::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='150'%20height='150'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='linear'%20slope='0'%20intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 150px 150px; opacity: .22; mix-blend-mode: overlay; }
  @media (prefers-reduced-motion: no-preference) {
    .rcard .rslider--solo .rslide { animation: rkb 26s ease-in-out infinite alternate; transform-origin: center; }
  }
  @keyframes rkb { from { transform: scale(1.015); } to { transform: scale(1.085); } }
  .rpad { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }

  .rtags { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; }
  .rtag { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; padding: 5px 10px; line-height: 1; white-space: nowrap; }
  .rtag--cater { background: var(--red); color: var(--paper); }
  .rtag--walk { border: 1px solid var(--ink); color: var(--ink); }
  .rtag--deliver { border: 1px solid var(--red); color: var(--red); }
  .rtag--private { background: var(--ink); color: var(--paper); }

  .rhead { display: flex; align-items: baseline; gap: 12px; margin: 0 0 8px; }
  .rhead .rcuisine { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
  .rcard h3 { font-family: var(--display); font-weight: 500; font-size: 30px; line-height: 1; letter-spacing: -.015em; margin: 0 0 10px; }
  .rhours { font-family: var(--mono); font-size: 11px; letter-spacing: .03em; color: var(--ink-soft); line-height: 1.7; margin: 0 0 16px; }
  .rquote { font-family: var(--display); font-size: 17px; line-height: 1.5; color: var(--ink); margin: 0 0 20px; }
  .rquote::before { content: "\201C"; }
  .rquote::after { content: "\201D"; }

  /* metric row (travel times OR catering facts) */
  .metrics { display: flex; border-top: 1px solid var(--line); margin-top: auto; }
  .metrics .m { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 4px 4px; text-align: center; }
  .metrics .m + .m { border-left: 1px solid var(--line); }
  .metrics .m svg { width: 19px; height: 19px; stroke: var(--red); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .metrics .m .mv { font-family: var(--display); font-size: 19px; line-height: 1; color: var(--ink); }
  .metrics .m .mv span { font-family: var(--mono); font-size: 10px; color: var(--mute); }
  .metrics .m .ml { font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); line-height: 1.35; }
  .metrics a.m { cursor: pointer; text-decoration: none; transition: color .15s ease; }
  .metrics a.m:hover .mv, .metrics a.m:hover .ml { color: var(--red); }


  .rhead .rprice { margin-left: auto; font-family: var(--display); font-size: 15px; line-height: 1; letter-spacing: 1.5px; white-space: nowrap; flex: none; align-self: center; }
  .rhead .rprice .on  { color: var(--ink); }
  .rhead .rprice .mid { color: color-mix(in oklab, var(--ink) 40%, var(--paper)); }
  .rhead .rprice .off { color: color-mix(in oklab, var(--ink) 16%, var(--paper)); }

  .pricekey { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin: 30px 0 -6px; padding: 15px 0 0; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--mute); }
  .pricekey .pk-lead { text-transform: uppercase; letter-spacing: .2em; color: var(--red); }
  .pricekey .pk { display: inline-flex; align-items: baseline; gap: 6px; }
  .pricekey .pk b { font-family: var(--display); font-size: 14px; color: var(--ink); font-weight: 500; letter-spacing: 1px; }
  .pricekey .pk-note { margin-left: auto; color: color-mix(in oklab, var(--mute) 80%, var(--paper)); }
  @media (max-width: 640px){ .pricekey .pk-note { margin-left: 0; width: 100%; } }

  /* card actions */
  .ractions { margin: 26px -24px -24px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; }
  .ractions a { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding: 15px 6px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s ease, color .15s ease; }
  .ractions a + a { border-left: 1px solid var(--line); }
  .ractions a:hover { background: var(--red); color: var(--paper); }
  .ractions a.is-solo { grid-column: 1 / -1; }

  /* closing */
  .cat-close { border-top: 1px solid var(--line); margin-top: 64px; padding: 44px 0 22px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 0 40px; align-items: start; }
  .cat-close h2 { grid-column: 1 / -1; font-family: var(--display); font-weight: 500; font-size: clamp(24px, 3vw, 32px); letter-spacing: -.015em; margin: 0 0 14px; }
  .cat-close p { margin: 0 0 16px; max-width: 460px; color: var(--ink-soft); }
  .cat-close .cbtn { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper); background: var(--red); display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; }
  .cat-close .cbtn:hover { background: #74181c; }
  .cat-close .ci { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; line-height: 1.95; color: var(--ink-soft); }
  .cat-close .ci b { color: var(--ink); font-weight: 500; }
  .cat-close .ci a { border-bottom: 1px solid var(--red); padding-bottom: 1px; }

  /* footer */
  .cat-foot { border-top: 1px solid var(--line); padding: 26px 0 60px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); line-height: 1.9; }
  .cat-foot a { border-bottom: 1px solid var(--line); padding-bottom: 1px; }
  .cat-foot a:hover { color: var(--red); border-color: var(--red); }
  .cat-foot .sep { margin: 0 8px; opacity: .55; }

  @media (max-width: 1150px) { .cards { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 820px) { .cards { grid-template-columns: 1fr; } }
  @media (max-width: 1000px) { .cat-close { grid-template-columns: 1fr; gap: 28px; } }

  .ci-link { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--red); padding-bottom: 2px; white-space: nowrap; }
  .ci-link:hover { color: var(--red); }

  /* mobile refinements */
  @media (max-width: 560px) {
    .wrap { padding: 0 18px; }
    .cat-hero { padding: 40px 0 14px; }
    .cat-hero .kicker { margin: 0 0 18px; }
    .filterbar { margin: 44px 0 -12px; }
    .fbtn { padding: 14px 14px; }
    .acc-head { padding: 20px 18px; gap: 14px; }
    .acc-pad { padding: 2px 18px 24px; }
    .cat-close { padding: 36px 0 20px; }
    .cat-foot { padding: 24px 0 48px; }
  }

/* Block „Von uns organisiert“ (Arbeitsraum + Kulturraum) */
.ar-full{border:1px solid var(--ink);padding:32px 34px;margin:26px 0 0;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:26px 52px;align-items:start}.ar-k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--red);margin:0 0 14px}.ar-full h2{font-family:var(--display);font-weight:500;font-size:clamp(24px,3vw,32px);letter-spacing:-.015em;line-height:1.1;margin:0 0 12px}.ar-lead{font-size:14.5px;line-height:1.6;color:var(--ink-soft);margin:0 0 18px;text-wrap:pretty}@media (max-width:820px){.ar-full{grid-template-columns:minmax(0,1fr);padding:24px 20px}}