{"id":327,"date":"2026-08-04T14:19:53","date_gmt":"2026-08-04T14:19:53","guid":{"rendered":"https:\/\/youthdirection.com\/?page_id=327"},"modified":"2026-08-04T14:48:40","modified_gmt":"2026-08-04T14:48:40","slug":"organisationsoversigt","status":"publish","type":"page","link":"https:\/\/youthdirection.com\/en\/organisationsoversigt\/","title":{"rendered":"Organisationsoversigt"},"content":{"rendered":"\n
\n
\n\n\n\n\n\nYouth Direction \u2014 Samarbejdspartnere<\/title>\n\n<!--\n ================================================================\n HURTIG GUIDE \u2014 de to ting du oftest skal \u00e6ndre\n ================================================================\n\n 1) SKIFTE PROFILFOTO \/ LOGO\n Find linjen med <img decoding=\"async\" src=\"...\"> under \"PROFILBILLEDE\" i det\n kort du vil \u00e6ndre. Skift kun teksten inde i src=\"...\":\n\n <img decoding=\"async\" src=\"ungdomsringen-logo.jpeg\" alt=\"...\">\n ^^^^^^^^^^^^^^^^^^^^^^^\n skift til filnavnet p\u00e5 det nye billede (skal ligge i samme\n mappe som denne fil), fx: <img decoding=\"async\" src=\"mit-nyt-logo.png\" ...>\n\n 2) S\u00c6TTE EN VIDEO IND\n Find \"VIDEO-MODAL\" for det kort du vil \u00e6ndre, og inds\u00e6t et\n YouTube-link i iframens src=\"...\". Du skal bruge \"embed\"-\n formen af linket, alts\u00e5:\n\n almindeligt link: https:\/\/youtu.be\/QOtEMBdOKKk\n embed-link: https:\/\/www.youtube.com\/embed\/QOtEMBdOKKk\n ^^^^^^^^^^^\n (koden efter youtu.be\/ \u2014 \n fjern evt. \"?si=...\" bagefter)\n\n <iframe src=\"https:\/\/www.youtube.com\/embed\/QOtEMBdOKKk\" ...>\n\n Det er den ENESTE ting du skal \u00e6ndre for at skifte video.\n ================================================================\n-->\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n \/* ============================================================\n DESIGN TOKENS \u2014 ret farverne her, s\u00e5 opdateres hele siden\n ============================================================ *\/\n :root{\n --bg: #0F0D09;\n --surface: #17140D;\n --surface-2: #1E1A11;\n --gold: #F2B705;\n --gold-soft: #F6CE4B;\n --gold-dim: rgba(242,183,5,0.16);\n --cream: #F6F2E7;\n --muted: #9C9585;\n --border: rgba(246,242,231,0.08);\n\n --font-display: 'Space Grotesk', sans-serif;\n --font-body: 'Inter', sans-serif;\n }\n\n *{ box-sizing: border-box; }\n\n body{\n margin: 0;\n font-family: var(--font-body);\n color: var(--cream);\n }\n\n \/* Wrapper omkring kortene \u2014 s\u00e6t baggrund\/luft HER i stedet for\n p\u00e5 <body>, s\u00e5 koden ikke p\u00e5virker resten af jeres side n\u00e5r I\n limer den ind i en eksisterende header\/layout. *\/\n .partner-section{\n background: transparent;\n padding: 64px 24px;\n }\n\n .partner-grid{\n max-width: 1100px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 28px;\n }\n\n \/* ============================================================\n =========== KOPI\u00c9R HERFRA \u2014 \u00c9T PARTNER-KORT ===============\n S\u00e6t dette <article class=\"partner-card\">\u2026<\/article>-blok ind\n \u00e9n gang for hver ny samarbejdspartner. Kun de markerede\n steder skal \u00e6ndres (foto, navn, beskrivelse, link, interesser).\n ============================================================ *\/\n .partner-card{\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n background: linear-gradient(180deg, var(--surface), var(--surface-2));\n border: 1px solid var(--border);\n border-radius: 20px;\n padding: 32px 26px 26px;\n transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;\n }\n .partner-card:hover{\n transform: translateY(-6px);\n border-color: var(--gold-dim);\n box-shadow: 0 24px 48px -20px rgba(0,0,0,0.6);\n }\n\n .partner-card__photo{\n width: 84px;\n height: 84px;\n border-radius: 50%;\n padding: 3px;\n margin-bottom: 16px;\n background: conic-gradient(from 180deg, var(--gold), var(--gold-soft), var(--gold));\n }\n .partner-card__photo img{\n display:block;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n object-fit: contain;\n border: 3px solid var(--surface);\n background: #FFFFFF;\n padding: 12px;\n }\n\n .partner-card__eyebrow{\n font-family: var(--font-display);\n font-size: 10.5px;\n font-weight: 700;\n letter-spacing: 0.09em;\n text-transform: uppercase;\n color: var(--gold);\n margin: 0 0 6px;\n }\n .partner-card__name{\n font-family: var(--font-display);\n font-size: 20px;\n font-weight: 700;\n margin: 0 0 12px;\n color: var(--cream);\n line-height: 1.25;\n }\n\n .partner-card__desc{\n font-size: 14px;\n line-height: 1.6;\n color: var(--muted);\n margin: 0 0 22px;\n }\n\n .partner-card__actions{\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n margin-bottom: 22px;\n }\n\n .partner-card__site{\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 7px;\n flex: 1;\n font-family: var(--font-body);\n font-weight: 600;\n font-size: 13px;\n color: #241B02;\n background: var(--gold);\n padding: 11px 16px;\n border-radius: 999px;\n text-decoration: none;\n transition: background .25s ease, gap .25s ease;\n }\n .partner-card__site:hover{\n background: var(--gold-soft);\n gap: 10px;\n }\n .partner-card__site svg{ width: 13px; height: 13px; flex-shrink: 0; }\n\n \/* videoikon-knap *\/\n .partner-card__video-btn{\n flex: 0 0 auto;\n width: 42px;\n height: 42px;\n border-radius: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: var(--surface-2);\n border: 1px solid var(--border);\n color: var(--gold);\n cursor: pointer;\n transition: transform .25s ease, border-color .25s ease, background .25s ease;\n }\n .partner-card__video-btn:hover{\n transform: scale(1.08);\n border-color: var(--gold);\n background: var(--gold-dim);\n }\n .partner-card__video-btn svg{\n width: 15px;\n height: 15px;\n margin-left: 2px; \/* optisk centrering af play-trekant *\/\n }\n\n .partner-card__interests{\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 8px;\n padding-top: 20px;\n width: 100%;\n border-top: 1px solid var(--border);\n }\n .partner-card__interests span{\n font-size: 11.5px;\n font-weight: 500;\n color: var(--gold-soft);\n background: var(--gold-dim);\n border: 1px solid rgba(242,183,5,0.25);\n padding: 5px 11px;\n border-radius: 999px;\n white-space: nowrap;\n }\n \/* ============================================================\n =========== KOPI\u00c9R HERTIL ===============\n ============================================================ *\/\n\n \/* ============================================================\n VIDEO-MODAL \u2014 popup der viser organisationens video.\n Denne del af CSS'en er f\u00e6lles og skal kun med i dokumentet\n \u00c9N gang (uanset hvor mange partner-kort du har).\n ============================================================ *\/\n .video-modal-overlay{\n position: fixed;\n inset: 0;\n background: rgba(8,7,4,0.8);\n backdrop-filter: blur(6px);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 24px;\n opacity: 0;\n pointer-events: none;\n transition: opacity .3s ease;\n z-index: 999;\n }\n .video-modal-overlay.is-open{\n opacity: 1;\n pointer-events: auto;\n }\n .video-modal{\n width: 100%;\n max-width: 720px;\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: 18px;\n overflow: hidden;\n transform: scale(.94);\n transition: transform .3s ease;\n }\n .video-modal-overlay.is-open .video-modal{\n transform: scale(1);\n }\n .video-modal__header{\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 14px 18px;\n border-bottom: 1px solid var(--border);\n }\n .video-modal__title{\n font-family: var(--font-display);\n font-weight: 700;\n font-size: 14px;\n color: var(--cream);\n margin: 0;\n }\n .video-modal__close{\n width: 32px;\n height: 32px;\n border-radius: 50%;\n border: 1px solid var(--border);\n background: var(--surface-2);\n color: var(--muted);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: color .2s ease, border-color .2s ease;\n }\n .video-modal__close:hover{\n color: var(--gold);\n border-color: var(--gold);\n }\n .video-modal__close svg{ width: 14px; height: 14px; }\n .video-modal__body{\n position: relative;\n width: 100%;\n aspect-ratio: 16 \/ 9;\n background: #000;\n }\n .video-modal__body video,\n .video-modal__body iframe{\n width: 100%;\n height: 100%;\n display: block;\n border: 0;\n }\n\n<\/style>\n<\/head>\n<body>\n\n <div class=\"partner-section\">\n <div class=\"partner-grid\">\n\n <!-- ============================================================\n PARTNER-KORT #1 \u2014 kopi\u00e9r denne <article>...<\/article> blok\n for hver ny samarbejdspartner og udfyld dine egne data.\n ============================================================ -->\n <article class=\"partner-card\">\n <div class=\"partner-card__photo\">\n <!-- \ud83d\udc49 PROFILBILLEDE: skift src til organisationens logo\/foto -->\n <img decoding=\"async\" src=\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcTveixTdr5frNfuLM4HlFkZCaeYgwY5lui8wZDwZEpptw&s=10\" alt=\"Ungdomsringens logo\">\n <\/div>\n\n <p class=\"partner-card__eyebrow\">Samarbejdspartner<\/p>\n <!-- 2. NAVN -->\n <h3 class=\"partner-card__name\">Ungdomsringen<\/h3>\n\n <!-- 3. KORT BESKRIVELSE -->\n <p class=\"partner-card__desc\">\n Foreningen for klubber og ungdomsskoler i Danmark, Gr\u00f8nland og F\u00e6r\u00f8erne.\n <\/p>\n\n <!-- 4. HJEMMESIDE + VIDEO -->\n <div class=\"partner-card__actions\">\n <!-- skift href til organisationens hjemmeside -->\n <a class=\"partner-card__site\" href=\"https:\/\/ungdomsringen.dk\" target=\"_blank\" rel=\"noopener\">\n Bes\u00f8g hjemmeside\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 17L17 7\"\/><path d=\"M8 7h9v9\"\/><\/svg>\n <\/a>\n <!-- data-video-trigger skal matche id'et p\u00e5 modalen nedenfor -->\n <button class=\"partner-card__video-btn\" type=\"button\" data-video-trigger=\"video-ungdomsringen\" aria-label=\"Se video om Ungdomsringen\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8 5v14l11-7L8 5z\"\/><\/svg>\n <\/button>\n <\/div>\n\n <!-- 5. INTERESSER: tilf\u00f8j\/fjern <span> efter behov -->\n <div class=\"partner-card__interests\">\n <span>Ungdomsklubber<\/span>\n <span>Ungdomsskoler<\/span>\n <span>Fritidsliv<\/span>\n <\/div>\n <\/article>\n\n <!-- 6. VIDEO-MODAL til dette kort \u2014 id skal v\u00e6re UNIKT for hver partner -->\n <div class=\"video-modal-overlay\" id=\"video-ungdomsringen\">\n <div class=\"video-modal\">\n <div class=\"video-modal__header\">\n <p class=\"video-modal__title\">Ungdomsringen<\/p>\n <button class=\"video-modal__close\" type=\"button\" aria-label=\"Luk video\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M6 6l12 12M18 6L6 18\"\/><\/svg>\n <\/button>\n <\/div>\n <div class=\"video-modal__body\">\n <!-- \ud83d\udc49 VIDEO: inds\u00e6t organisationens YouTube-link her (se guide i toppen af filen) -->\n <iframe src=\"https:\/\/www.youtube.com\/embed\/QOtEMBdOKKk\" title=\"Ungdomsringen video\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n <\/div>\n <\/div>\n <\/div>\n <!-- ============================================================\n SLUT P\u00c5 PARTNER-KORT #1\n ============================================================ -->\n\n\n <!-- Eksempel #2, s\u00e5 du kan se gitteret med flere kort side om side -->\n <article class=\"partner-card\">\n <div class=\"partner-card__photo\">\n <img decoding=\"async\" src=\"https:\/\/via.ritzau.dk\/data\/images\/00084\/481b4bea-c14e-48ed-8f03-48b45e68c191.png\" alt=\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcSK-NU1JncDtnmPMfwwsNaqexaFVvfs145RGTcGTQ6CB0-CYOmduv8Xj4E&s=10\">\n <\/div>\n <p class=\"partner-card__eyebrow\">Samarbejdspartner<\/p>\n <h3 class=\"partner-card__name\">Dansk Ungdoms F\u00e6llesr\u00e5d<\/h3>\n <p class=\"partner-card__desc\">\n Paraplyorganisation for over 90 b\u00f8rne- og ungdomsorganisationer i Danmark.\n <\/p>\n <div class=\"partner-card__actions\">\n <a class=\"partner-card__site\" href=\"https:\/\/duf.dk\" target=\"_blank\" rel=\"noopener\">\n Bes\u00f8g hjemmeside\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 17L17 7\"\/><path d=\"M8 7h9v9\"\/><\/svg>\n <\/a>\n <button class=\"partner-card__video-btn\" type=\"button\" data-video-trigger=\"video-duf\" aria-label=\"Se video om DUF\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8 5v14l11-7L8 5z\"\/><\/svg>\n <\/button>\n <\/div>\n <div class=\"partner-card__interests\">\n <span>Interessevaretagelse<\/span>\n <span>Demokrati<\/span>\n <span>Netv\u00e6rk<\/span>\n <\/div>\n <\/article>\n\n <div class=\"video-modal-overlay\" id=\"video-duf\">\n <div class=\"video-modal\">\n <div class=\"video-modal__header\">\n <p class=\"video-modal__title\">Dansk Ungdoms F\u00e6llesr\u00e5d<\/p>\n <button class=\"video-modal__close\" type=\"button\" aria-label=\"Luk video\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M6 6l12 12M18 6L6 18\"\/><\/svg>\n <\/button>\n <\/div>\n <div class=\"video-modal__body\">\n <!-- \ud83d\udc49 VIDEO: inds\u00e6t YouTube-embed-link her (samme fremgangsm\u00e5de som ovenfor) -->\n <iframe src=\"https:\/\/www.youtube.com\/embed\/gTcPBuru_GU\" title=\"DUF video\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n <script>\n \/\/ \u00c5bn modal ved klik p\u00e5 videoikon\n document.querySelectorAll('[data-video-trigger]').forEach(function(btn){\n btn.addEventListener('click', function(){\n var modal = document.getElementById(btn.dataset.videoTrigger);\n if(!modal) return;\n modal.classList.add('is-open');\n document.body.style.overflow = 'hidden';\n });\n });\n\n \/\/ Luk modal (krydset, klik udenfor, eller Escape) + stop video\n document.querySelectorAll('.video-modal-overlay').forEach(function(overlay){\n function closeModal(){\n overlay.classList.remove('is-open');\n document.body.style.overflow = '';\n var video = overlay.querySelector('video');\n if(video){ video.pause(); video.currentTime = 0; }\n var iframe = overlay.querySelector('iframe');\n if(iframe){ iframe.src = iframe.src; } \/\/ genindl\u00e6s for at stoppe YouTube-afspilning\n }\n overlay.querySelector('.video-modal__close').addEventListener('click', closeModal);\n overlay.addEventListener('click', function(e){\n if(e.target === overlay) closeModal();\n });\n document.addEventListener('keydown', function(e){\n if(e.key === 'Escape') closeModal();\n });\n });\n <\/script>\n\n<\/body>\n<\/html>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:54px\" aria-hidden=\"true\" class=\"wp-block-spacer ext-animate--on\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Youth Direction \u2014 Samarbejdspartnere Samarbejdspartner Ungdomsringen Foreningen for klubber og ungdomsskoler i Danmark, Gr\u00f8nland og F\u00e6r\u00f8erne. Bes\u00f8g hjemmeside Ungdomsklubber Ungdomsskoler Fritidsliv Ungdomsringen Samarbejdspartner Dansk Ungdoms F\u00e6llesr\u00e5d Paraplyorganisation for over 90 b\u00f8rne- og ungdomsorganisationer i Danmark. Bes\u00f8g hjemmeside Interessevaretagelse Demokrati Netv\u00e6rk Dansk Ungdoms F\u00e6llesr\u00e5d<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-with-title","meta":{"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"footnotes":""},"class_list":["post-327","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/youthdirection.com\/en\/wp-json\/wp\/v2\/pages\/327","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/youthdirection.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/youthdirection.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/youthdirection.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/youthdirection.com\/en\/wp-json\/wp\/v2\/comments?post=327"}],"version-history":[{"count":14,"href":"https:\/\/youthdirection.com\/en\/wp-json\/wp\/v2\/pages\/327\/revisions"}],"predecessor-version":[{"id":344,"href":"https:\/\/youthdirection.com\/en\/wp-json\/wp\/v2\/pages\/327\/revisions\/344"}],"wp:attachment":[{"href":"https:\/\/youthdirection.com\/en\/wp-json\/wp\/v2\/media?parent=327"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}