{"id":2377,"date":"2026-11-03T14:41:17","date_gmt":"2026-11-03T13:41:17","guid":{"rendered":"https:\/\/iiwii.cologne\/projects\/?page_id=2377"},"modified":"2026-11-09T10:04:35","modified_gmt":"2026-11-09T09:04:35","slug":"jofunk","status":"publish","type":"page","link":"https:\/\/iiwii.cologne\/projects\/jofunk\/","title":{"rendered":"jofunk \u2013 DJ &#038; Producer for House, Disco &#038; Funk from Cologne"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2377\" class=\"elementor elementor-2377\" data-elementor-post-type=\"page\">\n\t\t\t\t<header class=\"elementor-element elementor-element-e707acc e-con-full dim dim-hero e-flex e-con e-parent\" data-id=\"e707acc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-483e105 dim-css elementor-widget elementor-widget-html\" data-id=\"483e105\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* ==================================================================\n   jofunk \u2013 Design B2 \u201eDimension \u2013 Bogen\u201c\n\n   Einbinden: steckt als <style> im unsichtbaren HTML-Widget ganz oben auf der\n   Seite (Klasse <pr\u00e4fix>-css). Diese Datei ist die Quelle: \u00c4nderungen hier\n   machen und den Inhalt in das Widget kopieren (innerhalb des style-Tags).\n   Alle Regeln h\u00e4ngen am Pr\u00e4fix bzw. an body:has(...), wirken also nur auf\n   dieser Seite \u2013 auch wenn die Datei zus\u00e4tzlich in theme.css steht.\n\n   Look: 70er-Prospekt auf Schwarz. Bogen aus Genre-W\u00f6rtern in\n   Regenbogen-Verlauf mit Linienraster, der aus der Tiefe nach vorne in\n   \u201ejofunk\u201c m\u00fcndet und langsam wie eine Welle durchl\u00e4uft; gestreifte \u00dcberschriften, drehender Sticker, Regenbogen-\n   Foto mit Zeilenraster, schr\u00e4ger Lichtstrahl beim Booking.\n\n   Inhalt dieser Datei:\n     - Schriften (@font-face, Dateien liegen in der Mediathek)\n     - Farben als Variablen an .dim (Hauptcontainer tragen die Klasse)\n     - Klassen mit Pr\u00e4fix \u201edim-\u201c f\u00fcr Schrift, Farbe und Effekte\n   Abst\u00e4nde, Spalten, Breiten und Mobil-Verhalten sind direkt in den\n   Elementor-Containern eingestellt, nicht hier.\n   Klassen zuweisen: Element \u2192 Erweitert \u2192 CSS-Klassen.\n   ================================================================== *\/\n\n\/* ---------- Fonts ---------- *\/\n@font-face {\n  font-family: 'Archivo Black';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\/projects\/wp-content\/uploads\/2026\/11\/jofunk-archivo-black-latin-400-normal.woff2) format('woff2');\n}\n\n@font-face {\n  font-family: 'Archivo';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\/projects\/wp-content\/uploads\/2026\/11\/jofunk-archivo-latin-400-normal.woff2) format('woff2');\n}\n\n@font-face {\n  font-family: 'Archivo';\n  font-style: normal;\n  font-weight: 700;\n  font-display: swap;\n  src: url(\/projects\/wp-content\/uploads\/2026\/11\/jofunk-archivo-latin-700-normal.woff2) format('woff2');\n}\n\n\/* ---------- Farben ---------- *\/\n.dim {\n  --dim-black: #0a0a0b;\n  --dim-cream: #e1d7cb;\n  --dim-c1: #46cfc4;\n  --dim-c2: #4f9ee8;\n  --dim-c3: #7a6cf0;\n  --dim-c4: #a957d6;\n  --dim-c5: #d9479a;\n  --dim-c6: #f0505a;\n  --dim-c7: #fb7a3c;\n  --dim-c8: #fdae3b;\n  --dim-c9: #ffd65a;\n  --dim-rainbow: linear-gradient(90deg, var(--dim-c1), var(--dim-c3), var(--dim-c5), var(--dim-c7), var(--dim-c9));\n  --dim-display: 'Archivo Black', 'Arial Black', sans-serif;\n  --dim-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;\n  color: var(--dim-cream);\n}\n\nbody:has(.dim) {\n  background-color: #0a0a0b;\n  background-image: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'\/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'\/><\/filter><rect width='100%25' height='100%25' filter='url(%23n)'\/><\/svg>\");\n}\n\n\/* ---------- Basis ---------- *\/\n.elementor .dim .elementor-widget {\n  font-family: var(--dim-sans);\n  color: inherit;\n}\n\n.elementor [class*=\"dim-\"] .elementor-heading-title {\n  font: inherit;\n  color: inherit;\n  letter-spacing: inherit;\n  margin: 0;\n}\n\n.elementor [class*=\"dim-\"] p {\n  font: inherit;\n  letter-spacing: inherit;\n  margin: 0;\n}\n\n.elementor [class*=\"dim-\"] p+p {\n  margin-block-start: .8em;\n}\n\n.elementor [class*=\"dim-\"] a:not(.elementor-button) {\n  color: inherit;\n  text-decoration: underline;\n  text-decoration-color: var(--dim-c7);\n  text-decoration-thickness: 2px;\n  text-underline-offset: .22em;\n  transition: color .2s;\n}\n\n.elementor [class*=\"dim-\"] a:not(.elementor-button):is(:hover, :focus-visible) {\n  color: var(--dim-c9);\n}\n\n.elementor .dim :focus-visible {\n  outline: 2px solid var(--dim-c9);\n  outline-offset: 3px;\n}\n\n.elementor .dim-small {\n  \/*font-size: .78rem;*\/\n  font-weight: 700;\n  \/*letter-spacing: .16em;*\/\n}\n\n\/* ---------- Kopf ---------- *\/\n.elementor .dim-brand {\n  font-family: var(--dim-display);\n  letter-spacing: -.02em;\n}\n\n.elementor .dim-brand p {\n  display: flex;\n  align-items: center;\n  gap: .35em;\n}\n\n.elementor .dim-nav p {\n  display: flex;\n  flex-wrap: wrap;\n  gap: .3em 1.4em;\n}\n\n.elementor .dim-nav a:not(.elementor-button) {\n  text-decoration: none;\n}\n\n\/* ---------- Echo-Bogen ----------\n   Nach dem Bell-\u201edimension\u201c-Prospekt: sechs Genre-W\u00f6rter im HTML-Widget\n   (dim-stack-w) laufen von hinten oben nach vorn und m\u00fcnden in das H1\n   \u201ejofunk\u201c. --i im HTML = Position (0 = ganz hinten, 5 = direkt \u00fcber\n   jofunk); je weiter hinten, desto weiter links.\n   Die W\u00f6rter sind gestreift und durchsichtig, \u00fcberschneiden sich also und\n   bleiben alle sichtbar. --stretch zieht die Buchstaben in die H\u00f6he,\n   --overlap = Anteil der Wort-H\u00f6he, um den das n\u00e4chste Wort dar\u00fcber liegt.\n   Alle Ma\u00dfe h\u00e4ngen an --fs (Schriftgr\u00f6\u00dfe in vw), dadurch skaliert der\n   ganze Bogen samt jofunk proportional mit der Bildschirmbreite. *\/\n.elementor .dim-echo {\n  --fs: clamp(5rem, 20vw, 11.5rem);\n  --stretch: 1.2;\n  --overlap: 0.55;\n  --x: .55em;\n  transform: rotate(-4deg) skewX(-6deg);\n  transform-origin: left bottom;\n  pointer-events: none;\n}\n\n.elementor .dim-stack {\n  display: flex;\n  flex-direction: column;\n  font-family: var(--dim-display);\n  font-size: var(--fs);\n  letter-spacing: -.035em;\n  \/*padding-block-start: .35em;*\/\n  user-select: none;\n}\n\n\n.elementor .dim-stack span {\n  --c: var(--dim-c1);\n  --d: calc((6 - var(--i)) \/ 6);\n  display: block;\n  width: max-content;\n  line-height: .7;\n  \/* = H\u00f6he der Buchstaben mit Oberl\u00e4nge *\/\n  margin-inline-start: calc(var(--x) + .6em * (1 - var(--d) * var(--d)) - 50px);\n  color: transparent;\n  background: repeating-linear-gradient(90deg, var(--c) 0 3px, transparent 3px 6px);\n  -webkit-background-clip: text;\n  background-clip: text;\n  transform: scaleY(var(--stretch));\n  transform-origin: left bottom;\n  animation: dim-wave 7s ease-in-out infinite;\n  animation-delay: calc(var(--i) * -.45s);\n}\n\n\/* Abstand so, dass jedes Wort um --overlap seiner (gestreckten) H\u00f6he \u00fcber dem vorherigen liegt *\/\n.elementor .dim-stack span+span {\n  margin-block-start: calc(.74em * var(--stretch) * (1 - var(--overlap)) - .74em);\n}\n\n\/* sechs Genres: Verlauf c1 \u2192 c9 mit angepassten Zwischent\u00f6nen *\/\n.elementor .dim-stack span:nth-child(2) {\n  --c: #6980ed;\n}\n\n.elementor .dim-stack span:nth-child(3) {\n  --c: #b354ca;\n}\n\n.elementor .dim-stack span:nth-child(4) {\n  --c: #eb4e67;\n}\n\n.elementor .dim-stack span:nth-child(5) {\n  --c: #fc8f3c;\n}\n\n.elementor .dim-stack span:nth-child(6) {\n  --c: var(--dim-c9);\n}\n\n\/* kleine Schrift: feineres Linienraster *\/\n@media (max-width: 767px) {\n  .elementor .dim-stack span {\n    background-image: repeating-linear-gradient(90deg, var(--c) 0 2px, transparent 2px 4px);\n  }\n}\n\n@keyframes dim-wave {\n\n  0%,\n  100% {\n    translate: 0 0;\n  }\n\n  50% {\n    translate: .05em -.06em;\n  }\n}\n\n.elementor .dim .dim-h1 {\n  font-family: var(--dim-display);\n  font-size: calc(var(--fs) + 0.4em);\n  line-height: .8;\n  letter-spacing: -.035em;\n  color: var(--dim-cream);\n  margin-block-start: -0.4em;\n  transform: translateX(calc((var(--x) + .8em * 1) - 50px)) scaleX(1.03);\n  transform-origin: left;\n  text-shadow: 3px .05em 0 var(--dim-black);\n}\n\n.elementor .dim-lead {\n  font-size: clamp(1.1rem, 1.8vw, 1.35rem);\n  line-height: 1.5;\n}\n\n.elementor .dim-lead p {\n  max-width: 40ch;\n}\n\n.elementor .dim-tags {\n  text-align: end;\n  line-height: 1.7;\n}\n\n\/* ---------- Abschnitte ---------- *\/\n.elementor .dim-main {\n  overflow-x: clip;\n  \/* schr\u00e4ge Gig-Liste und Lichtstrahl nicht seitlich \u00fcberstehen lassen *\/\n}\n\n.elementor .dim-section {\n  position: relative;\n}\n\n.elementor .dim .dim-h2 {\n  font-family: var(--dim-display);\n  font-size: clamp(3.4rem, 10vw, 7.5rem);\n  line-height: 1.2em;\n\n  letter-spacing: -.04em;\n  width: max-content;\n  max-width: 100%;\n  color: transparent;\n  \n  background: repeating-linear-gradient(90deg, rgba(10, 10, 11, .55) 0 2px, transparent 2px 5px), var(--dim-rainbow);\n  -webkit-background-clip: text;\n  background-clip: text;\n}\n\n\/*background: repeating-linear-gradient(90deg, rgba(10, 10, 11, .55) 0 2px, transparent 2px 5px), linear-gradient(180deg, var(--dim-c1), var(--dim-c3), var(--dim-c5), var(--dim-c7), var(--dim-c9));\n  -webkit-background-clip: text;\n  background-clip: text;\n  background-attachment: fixed;\n    -webkit-background-clip: text;\n    color: transparent;*\/\n\n.elementor .dim-text {\n  font-size: 1.15rem;\n  font-size: clamp(1.1rem, 1.8vw, 1.35rem);\n  line-height: 1.5;\n  font-weight: 700;\n}\n\n.elementor .dim-text p {\n  max-width: 800px;\n}\n\n\/* Credits mit Farbbalken *\/\n.elementor .dim-credits ul,\n.elementor .dim-gigs ul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.elementor .dim-credits li {\n  --c: var(--dim-c1);\n  display: grid;\n  grid-template-columns: 10em 1fr;\n  gap: .3em 1.5em;\n  padding: .75em 0 .75em 1.1em;\n  border-left: 20px solid var(--c);\n  line-height: 1.2;\n}\n\n.elementor .dim-credits li+li {\n  margin-block-start: 6px;\n}\n\n.elementor .dim-credits li:nth-child(2) {\n  --c: var(--dim-c3);\n  \/*margin-inline-start: 14px; *\/\n}\n\n.elementor .dim-credits li:nth-child(3) {\n  --c: var(--dim-c5);\n  \/*margin-inline-start: 28px;*\/\n}\n\n.elementor .dim-credits li:nth-child(4) {\n  --c: var(--dim-c7);\n  \/*margin-inline-start: 42px;*\/\n}\n\n.elementor .dim-credits li:nth-child(5) {\n  --c: var(--dim-c9);\n  \/*margin-inline-start: 56px;*\/\n}\n\n.elementor .dim-credits strong {\n  font-size: .78rem;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: .18em;\n  color: var(--c);\n  padding-block-start: .3em;\n}\n\n.elementor .dim-credits li {\n  grid-template-columns: 1fr;\n  gap: .15em;\n}\n\n.elementor .dim-credits li:nth-child(n) {\n  margin-inline-start: 0;\n}\n\n\/* Player *\/\n.elementor .dim-player {\n  display: grid;\n  max-width:800px;\n  gap: 14px;\n  justify-items: start;\n  padding: 26px;\n  border: 2px solid transparent;\n  border-radius: 0px;\n  background: linear-gradient(var(--dim-black), var(--dim-black)) padding-box, var(--dim-rainbow) border-box;\n}\n\n.elementor .dim-player:has(iframe) {\n  padding: 0px;\n  border: none;\n}\n\n.elementor .dim-player iframe {\n  width: 100%;\n  border: 0;\n  display: block;\n}\n\n.elementor .dim-play {\n  font: 700 .85rem\/1 var(--dim-sans);\n  text-transform: uppercase;\n  letter-spacing: .18em;\n  color: var(--dim-black);\n  background: var(--dim-cream);\n  border: 0;\n  border-radius: 0px;\n  padding: 1.1em 1.8em;\n  cursor: pointer;\n  transition: background-color .2s;\n}\n\n.elementor .dim-play:is(:hover, :focus-visible) {\n  background: var(--dim-c9);\n}\n\n.elementor .dim-note {\n  font-size: .85rem;\n  opacity: .65;\n}\n\n\/* Gigs: jede Zeile eine Farbe aus dem Verlauf, leicht schr\u00e4g *\/\n.elementor .dim-gigs ul {\n  transform: skewY(-3deg);\n}\n\n.elementor .dim-gigs li {\n  --c: var(--dim-c1);\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: .2em 1em;\n  padding: .35em 0;\n  color: var(--c);\n  transition: translate .3s;\n}\n\n.elementor .dim-gigs li:hover {\n  translate: .6em 0;\n}\n\n.elementor .dim-gigs li:nth-child(9n+2) {\n  --c: var(--dim-c2);\n}\n\n.elementor .dim-gigs li:nth-child(9n+3) {\n  --c: var(--dim-c3);\n}\n\n.elementor .dim-gigs li:nth-child(9n+4) {\n  --c: var(--dim-c4);\n}\n\n.elementor .dim-gigs li:nth-child(9n+5) {\n  --c: var(--dim-c5);\n}\n\n.elementor .dim-gigs li:nth-child(9n+6) {\n  --c: var(--dim-c6);\n}\n\n.elementor .dim-gigs li:nth-child(9n+7) {\n  --c: var(--dim-c7);\n}\n\n.elementor .dim-gigs li:nth-child(9n+8) {\n  --c: var(--dim-c8);\n}\n\n.elementor .dim-gigs li:nth-child(9n+9) {\n  --c: var(--dim-c9);\n}\n\n.elementor .dim-gigs li>span:first-child {\n  font-size: .85rem;\n  font-weight: 700;\n  font-variant-numeric: tabular-nums;\n  letter-spacing: .1em;\n  min-width: 6.5em;\n}\n\n.elementor .dim-gigs li>span:last-child {\n  font-family: var(--dim-display);\n  font-size: clamp(1.5rem, 3.4vw, 2.6rem);\n  line-height: 1.05;\n  letter-spacing: -.02em;\n}\n\n.elementor .dim-gigs em {\n  font-family: var(--dim-sans);\n  font-style: normal;\n  font-size: .45em;\n  font-weight: 700;\n  letter-spacing: .14em;\n  text-transform: uppercase;\n  color: var(--dim-cream);\n  vertical-align: .5em;\n}\n\n\/* Booking: schr\u00e4ger Lichtstrahl aus sechs Farbb\u00e4ndern *\/\n.elementor .dim-beam-w {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 0;\n}\n\n.elementor .dim-book> :not(.dim-beam-w) {\n  position: relative;\n  z-index: 1;\n}\n\n.elementor .dim-beam {\n  position: absolute;\n  right: -10%;\n  top: -20%;\n  width: 55%;\n  height: 160%;\n  display: flex;\n  transform: rotate(28deg);\n  opacity: .9;\n}\n\n.elementor .dim-beam i {\n  flex: 1;\n  background: repeating-linear-gradient(90deg, var(--c) 0 3px, transparent 3px 6px);\n}\n\n.elementor .dim-beam i:nth-child(1) {\n  --c: var(--dim-c1);\n}\n\n.elementor .dim-beam i:nth-child(2) {\n  --c: var(--dim-c3);\n}\n\n.elementor .dim-beam i:nth-child(3) {\n  --c: var(--dim-c5);\n}\n\n.elementor .dim-beam i:nth-child(4) {\n  --c: var(--dim-c6);\n}\n\n.elementor .dim-beam i:nth-child(5) {\n  --c: var(--dim-c7);\n}\n\n.elementor .dim-beam i:nth-child(6) {\n  --c: var(--dim-c9);\n}\n\n.elementor .dim-book .dim-text p {\n  max-width: 44ch;\n}\n\n.elementor .dim-btn .elementor-button {\n  font-family: var(--dim-sans);\n  font-size: .8rem;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: .18em;\n  color: var(--dim-black);\n  background: var(--dim-cream);\n  border-radius: 0px;\n  box-shadow: none;\n  transition: background-color .2s, rotate .2s;\n}\n\n.elementor .dim-btn .elementor-button:is(:hover, :focus-visible) {\n  background: var(--dim-c9);\n  rotate: -3deg;\n}\n\n\/* ---------- Footer ---------- *\/\n.elementor .dim-footer {\n  border-top: 2px solid;\n  border-image: var(--dim-rainbow) 1;\n}\n\n.elementor .dim-copy a {\n  text-decoration: none !important;\n}\n\n.dim .a11y-toggle {\n  font-family: var(--dim-sans);\n  color: var(--dim-cream);\n  border-color: var(--dim-cream);\n  background: transparent;\n}\n\n\/* ---------- Mobil ---------- *\/\n@media (max-width: 767px) {\n  .elementor .dim-claim {\n    text-align: start;\n    align-self: flex-start;\n  }\n\n  .elementor .dim-tags {\n    text-align: start;\n  }\n\n  .elementor .dim-sticker-w {\n    top: 40px;\n  }\n\n  .elementor .dim-sticker {\n    width: 108px;\n  }\n\n  .elementor .dim-sticker span {\n    font-size: .68rem;\n  }\n\n  .elementor .dim-beam {\n    width: 90%;\n    opacity: .45;\n  }\n\n  .elementor .dim-gigs li {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 0;\n    padding: .45em 0;\n  }\n}\n\n\/* ---------- Ruhe: keine Bewegung ---------- *\/\n@media (prefers-reduced-motion: reduce) {\n\n  .elementor .dim-stack span,\n  .elementor .dim-sticker {\n    animation: none;\n  }\n}\n\nhtml.a11y-calm .elementor :is(.dim-stack span, .dim-sticker) {\n  animation: none;\n}\n\n.elementor .dim-css {\n  display: none;\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-36f550d e-con-full dim-topbar a11y-slot e-flex e-con e-child\" data-id=\"36f550d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ab98a60 dim-small elementor-widget elementor-widget-text-editor\" data-id=\"ab98a60\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>let&#8217;s play some&#8230;<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0497cbd dim-small elementor-hidden-mobile elementor-widget elementor-widget-text-editor\" data-id=\"0497cbd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>on <a href=\"https:\/\/soundcloud.com\/jofunk\" target=\"_blank\" rel=\"noopener\">SoundCloud<\/a> &amp; <a href=\"https:\/\/t.me\/jofunk_dj\" target=\"_blank\" rel=\"noopener\">Telegram<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/header>\n\t\t<header class=\"elementor-element elementor-element-592429a e-con-full dim dim-hero e-flex e-con e-parent\" data-id=\"592429a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-8d7731e e-con-full dim-echo e-flex e-con e-child\" data-id=\"8d7731e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7a7c578 dim-stack-w elementor-widget elementor-widget-html\" data-id=\"7a7c578\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"dim-stack\" aria-hidden=\"true\"><span style=\"--i:0\">&nbsp;<\/span><span style=\"--i:1\">funk<\/span><span style=\"--i:2\">disco<\/span><span style=\"--i:3\">house<\/span><span style=\"--i:4\">boogie<\/span><span style=\"--i:5\">electro<\/span><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e9ff2a0 dim-h1 elementor-widget elementor-widget-heading\" data-id=\"e9ff2a0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">jofunk<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/header>\n\t\t<main class=\"elementor-element elementor-element-c03340d e-con-full dim dim-main e-flex e-con e-parent\" data-id=\"c03340d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<section class=\"elementor-element elementor-element-676e11f e-con-full dim-section dim-wer e-flex e-con e-child\" data-id=\"676e11f\" data-element_type=\"container\" data-e-type=\"container\" id=\"wer\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e99ff22 dim-lead dim-text elementor-widget elementor-widget-text-editor\" data-id=\"e99ff22\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Playing for unreasonable dancing and more interaction. Sometimes it&#8217;s all disco rainbows, sometimes the journey takes a turn towards techno and dirty acid funk. Always with uplifting melodies and the raw sound of real instruments.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5da363f dim-credits dim-text elementor-widget elementor-widget-text-editor\" data-id=\"5da363f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<ul><li><strong>DIGGING<\/strong><span>Music lover since the \u201990s<\/span><\/li><li><strong>PRODUCING<\/strong><span>Own tracks every now and then (<a href=\"https:\/\/soundcloud.com\/jofunk\" target=\"_blank\" rel=\"noopener\">SoundCloud<\/a>)<\/span><\/li><li><strong>DJING<\/strong><span>20+ years. Vinyl, now Traktor &amp; Rekordbox<\/span><\/li><li><strong>MEMBER OF<\/strong><span><a href=\"https:\/\/iiwii.cologne\/projects\/wsds\/\" target=\"_blank\" rel=\"noopener\">wir sind die Sonne<\/a>, <a href=\"https:\/\/iiwii.cologne\/projects\/ebendrum\/\" target=\"_blank\" rel=\"noopener\">EbenDrum Group<\/a>,\u00a0Modular Drift<\/span><\/li><li><strong>BASED IN<\/strong><span>Cologne, Germany<\/span><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/section>\n\t\t<section class=\"elementor-element elementor-element-d015d98 e-con-full dim-section dim-hoeren e-flex e-con e-child\" data-id=\"d015d98\" data-element_type=\"container\" data-e-type=\"container\" id=\"hoeren\">\n\t\t<div class=\"elementor-element elementor-element-e5d7256 e-con-full dim-hoeren-row e-flex e-con e-child\" data-id=\"e5d7256\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-ee50d97 e-con-full dim-hoeren-text e-flex e-con e-child\" data-id=\"ee50d97\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8571eb6 dim-h2 elementor-widget elementor-widget-heading\" data-id=\"8571eb6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span style=\"font-size: inherit;font-weight: inherit;letter-spacing: -4.172px\">wah?<\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c91ef41 dim-text elementor-widget elementor-widget-text-editor\" data-id=\"c91ef41\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>More mixes, edits and original tracks on <a href=\"https:\/\/soundcloud.com\/jofunk\" target=\"_blank\" rel=\"noopener\">SoundCloud<\/a>.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9f1a6c0 dim-player-w elementor-widget elementor-widget-html\" data-id=\"9f1a6c0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"dim-player\"><button type=\"button\" class=\"dim-play\" data-embed=\"<iframe title=&quot;jofunk auf SoundCloud&quot; height=&quot;420&quot; allow=&quot;autoplay&quot; loading=&quot;lazy&quot; src=&quot;https:\/\/w.soundcloud.com\/player\/?url=https%3A\/\/api.soundcloud.com\/playlists\/soundcloud%253Aplaylists%253A2326212099&amp;color=%23ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=false&amp;show_user=false&amp;show_reposts=false&amp;show_teaser=false&quot;><\/iframe>\" onclick=\"this.parentNode.innerHTML=this.dataset.embed\">\u25b6 Load Player<\/button><p class=\"dim-note\">Loads the SoundCloud player \u2013 data will be shared with SoundCloud.<\/p><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/section>\n\t\t<section class=\"elementor-element elementor-element-66b895e e-con-full dim-section dim-gigs-sec e-flex e-con e-child\" data-id=\"66b895e\" data-element_type=\"container\" data-e-type=\"container\" id=\"gigs\">\n\t\t\t\t<div class=\"elementor-element elementor-element-deaa827 dim-h2 elementor-widget elementor-widget-heading\" data-id=\"deaa827\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">floors<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ffcf0f1 dim-text elementor-widget elementor-widget-text-editor\" data-id=\"ffcf0f1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>New dates are announced first on <a href=\"https:\/\/t.me\/jofunk_dj\" target=\"_blank\" rel=\"noopener\">Telegram<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ee84cac dim-gigs elementor-widget elementor-widget-text-editor\" data-id=\"ee84cac\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<ul><li><span>17.01.27<\/span><span>OYA Bar <em>Cologne<\/em><\/span><\/li>\r\n<li><span>12.09.26<\/span><span>fi Club <em>Cologne<\/em><\/span><\/li>\r\n<li><span>05.07.26<\/span><span>Cologne Pride \/ CSD <em>Cologne<\/em><\/span><\/li>\r\n<li><span>24.04.26<\/span><span>Schlachthof Eupen <em>Belgium<\/em><\/span><\/li>\r\n<li><span>27.03.26<\/span><span>Schn\u00f6rres <em>Cologne<\/em><\/span><\/li>\r\n<li><span>18.01.26<\/span><span>OYA Bar <em>Cologne<\/em><\/span><\/li>\r\n<li><span>05.12.25<\/span><span>Zum scheuen Reh <em>Cologne<\/em><\/span><\/li>\r\n<li><span>12.07.25<\/span><span>K\u00f6rnerstra\u00dfenfest <em>Cologne<\/em><\/span><\/li>\r\n<li><span>04.07.25<\/span><span>MyzelMyzel <em>Cologne<\/em><\/span><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/section>\n\t\t<section class=\"elementor-element elementor-element-6694f12 e-con-full dim-section dim-book e-flex e-con e-child\" data-id=\"6694f12\" data-element_type=\"container\" data-e-type=\"container\" id=\"booking\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cd2b779 dim-beam-w elementor-widget elementor-widget-html\" data-id=\"cd2b779\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"dim-beam\" aria-hidden=\"true\"><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6c0ea6c dim-h2 elementor-widget elementor-widget-heading\" data-id=\"6c0ea6c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">booking<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b9c3565 dim-text elementor-widget elementor-widget-text-editor\" data-id=\"b9c3565\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>To <a href=\"mailto:jofunk@posteo.de\">jofunk@posteo.de<\/a> or\u00a0<br \/>send me a\u00a0message on <a href=\"https:\/\/soundcloud.com\/jofunk\" target=\"_blank\" rel=\"noopener\">SoundCloud.<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-50fda5f e-con-full dim-downloads e-flex e-con e-child\" data-id=\"50fda5f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3f35f78 elementor-widget__width-auto dim-btn  elementor-widget elementor-widget-button\" data-id=\"3f35f78\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/drive.google.com\/drive\/folders\/1afjFIJysoh4EYAsPKVDTCODMZN-GAxZG\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Press-Kit (Google Drive) \u2193<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-29c39e3 elementor-widget__width-auto dim-btn  elementor-widget elementor-widget-button\" data-id=\"29c39e3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/iiwii.cologne\/projects\/wp-content\/uploads\/2026\/10\/jofunk-techrider.pdf\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u2193 Technical Rider<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/section>\n\t\t\t\t<\/main>\n\t\t<footer class=\"elementor-element elementor-element-961bec4 e-con-full dim dim-footer e-flex e-con e-parent\" data-id=\"961bec4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5c9440f elementor-widget__width-auto dim-small dim-copy elementor-widget elementor-widget-text-editor\" data-id=\"5c9440f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>\u00a9 2022 jofunk \u00b7 <a href=\"https:\/\/iiwii.cologne\/impressum\/\" target=\"_blank\" rel=\"noopener\">Impressum<\/a> \u00b7 <a href=\"https:\/\/iiwii.cologne\/datenschutz\/\" target=\"_blank\" rel=\"noopener\">Datenschutz<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f98c96b e-con-full e-flex e-con e-child\" data-id=\"f98c96b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b948fdc elementor-widget__width-auto dim-small elementor-widget elementor-widget-text-editor\" data-id=\"b948fdc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p><a href=\"https:\/\/soundcloud.com\/jofunk\" target=\"_blank\" rel=\"noopener\">SoundCloud<\/a> \u00b7 <a href=\"https:\/\/t.me\/jofunk_dj\" target=\"_blank\" rel=\"noopener\">Telegram<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3d65677 elementor-widget elementor-widget-image\" data-id=\"3d65677\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/iiwii.cologne\/\">\n\t\t\t\t\t\t\t<img decoding=\"async\" width=\"318\" height=\"142\" src=\"https:\/\/iiwii.cologne\/projects\/wp-content\/uploads\/2026\/11\/iiwii-footer-logo-trans.webp\" class=\"attachment-large size-large wp-image-3015\" alt=\"\" srcset=\"https:\/\/iiwii.cologne\/projects\/wp-content\/uploads\/2026\/11\/iiwii-footer-logo-trans.webp 318w, https:\/\/iiwii.cologne\/projects\/wp-content\/uploads\/2026\/11\/iiwii-footer-logo-trans-300x134.webp 300w\" sizes=\"(max-width: 318px) 100vw, 318px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/footer>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Cologne-based DJ &#038; producer playing House, Disco, Funk and electronic grooves. Bookings, mixes, edits and original tracks.<\/p>\n","protected":false},"author":1,"featured_media":2889,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-2377","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/iiwii.cologne\/projects\/wp-json\/wp\/v2\/pages\/2377","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iiwii.cologne\/projects\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/iiwii.cologne\/projects\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/iiwii.cologne\/projects\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/iiwii.cologne\/projects\/wp-json\/wp\/v2\/comments?post=2377"}],"version-history":[{"count":360,"href":"https:\/\/iiwii.cologne\/projects\/wp-json\/wp\/v2\/pages\/2377\/revisions"}],"predecessor-version":[{"id":3105,"href":"https:\/\/iiwii.cologne\/projects\/wp-json\/wp\/v2\/pages\/2377\/revisions\/3105"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/iiwii.cologne\/projects\/wp-json\/wp\/v2\/media\/2889"}],"wp:attachment":[{"href":"https:\/\/iiwii.cologne\/projects\/wp-json\/wp\/v2\/media?parent=2377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}