{"id":502,"date":"2026-08-13T15:23:49","date_gmt":"2026-08-13T15:23:49","guid":{"rendered":"https:\/\/youthdirection.com\/?page_id=502"},"modified":"2026-08-13T16:23:39","modified_gmt":"2026-08-13T16:23:39","slug":"aktuelt-og-for-de-unge","status":"publish","type":"page","link":"https:\/\/youthdirection.com\/en\/aktuelt-og-for-de-unge\/","title":{"rendered":"Aktuelt og for de unge"},"content":{"rendered":"\n<div class=\"wp-block-columns alignfull ext-animate--on is-layout-flex wp-container-core-columns-is-layout-cb0a7ccb wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<!DOCTYPE html>\n<html lang=\"da\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>YouthDirection &#8211; Aktuelt &#038; for de unge<\/title>\n  <style>\n    *, *::before, *::after {\n      box-sizing: border-box;\n      margin: 0;\n      padding: 0;\n    }\n\n    :root {\n      --bg-dark: #18181b;\n      --card-bg: #27272a;\n      --accent-yellow: #ffbf00;\n      --text-light: #f4f4f5;\n      --text-muted: #a1a1aa;\n      --border-color: #3f3f46;\n    }\n\n    body {\n      font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: var(--bg-dark);\n      color: var(--text-light);\n      line-height: 1.6;\n      overflow-x: hidden;\n    }\n\n    .container {\n      max-width: 1200px;\n      margin: 0 auto;\n      padding: 0 20px;\n    }\n\n    \/* Header *\/\n    .blog-header {\n      padding: 40px 0 20px;\n      text-align: center;\n    }\n\n    .badge {\n      display: inline-block;\n      background-color: rgba(255, 191, 0, 0.15);\n      color: var(--accent-yellow);\n      border: 1px solid var(--accent-yellow);\n      padding: 6px 14px;\n      border-radius: 20px;\n      font-size: 13px;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 1px;\n      margin-bottom: 20px;\n    }\n\n    .blog-header h1 {\n      font-size: 40px;\n      line-height: 1.15;\n      font-weight: 900;\n      margin-bottom: 16px;\n      letter-spacing: -1px;\n    }\n\n    .blog-header h1 span {\n      color: var(--accent-yellow);\n    }\n\n    .blog-header p {\n      font-size: 17px;\n      color: var(--text-muted);\n      max-width: 650px;\n      margin: 0 auto;\n    }\n\n    \/* Knapper *\/\n    .btn-primary {\n      display: inline-block;\n      background-color: var(--accent-yellow);\n      color: var(--bg-dark);\n      font-weight: 800;\n      padding: 12px 24px;\n      border-radius: 12px;\n      text-decoration: none;\n      font-size: 15px;\n      box-shadow: 0 10px 25px -5px rgba(255, 191, 0, 0.3);\n      border: none;\n      cursor: pointer;\n    }\n\n    \/* Fremh\u00e6vet artikel *\/\n    .featured-article {\n      background-color: var(--card-bg);\n      border-radius: 24px;\n      border: 1px solid var(--border-color);\n      overflow: hidden;\n      margin: 30px 0 50px;\n      width: 100%;\n    }\n\n    .featured-content {\n      padding: 28px;\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n    }\n\n    .article-meta {\n      color: var(--accent-yellow);\n      font-weight: 700;\n      font-size: 12px;\n      margin-bottom: 10px;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .featured-content h2 {\n      font-size: 24px;\n      line-height: 1.3;\n      margin-bottom: 14px;\n      color: #fff;\n      font-weight: 800;\n    }\n\n    .featured-content p {\n      color: var(--text-muted);\n      font-size: 15px;\n      margin-bottom: 20px;\n    }\n\n    \/* Overskrift til Grid *\/\n    .grid-title {\n      padding-bottom: 16px;\n      border-bottom: 1px solid var(--border-color);\n      margin-bottom: 30px;\n      font-size: 24px;\n      font-weight: 800;\n    }\n\n    \/* Responsive Grid for artikler *\/\n    .articles-grid {\n      display: grid;\n      grid-template-columns: 1fr;\n      gap: 20px;\n      margin-bottom: 60px;\n    }\n\n    .article-card {\n      background-color: var(--card-bg);\n      border-radius: 20px;\n      border: 1px solid var(--border-color);\n      padding: 24px;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n    }\n\n    .article-card h3 {\n      font-size: 18px;\n      line-height: 1.35;\n      margin-bottom: 10px;\n      color: #fff;\n      font-weight: 800;\n    }\n\n    .article-card p {\n      font-size: 14px;\n      color: var(--text-muted);\n      margin-bottom: 20px;\n    }\n\n    .article-footer {\n      margin-top: auto;\n      padding-top: 14px;\n      border-top: 1px solid var(--border-color);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .read-link {\n      color: var(--accent-yellow);\n      text-decoration: none;\n      font-size: 14px;\n      font-weight: 700;\n      background: none;\n      border: none;\n      cursor: pointer;\n      padding: 0;\n    }\n\n    \/* Popup Overlay - Tvunget fixed til sk\u00e6rmen med !important *\/\n    .modal-overlay {\n      position: fixed !important;\n      top: 0 !important;\n      left: 0 !important;\n      width: 100vw !important;\n      height: 100vh !important;\n      background-color: rgba(0, 0, 0, 0.75) !important;\n      display: flex !important;\n      justify-content: center !important;\n      align-items: center !important;\n      z-index: 999999 !important; \/* Ligger over alt, inkl. WP-adminbaren *\/\n      opacity: 0;\n      visibility: hidden;\n      transition: opacity 0.3s ease, visibility 0.3s ease;\n      padding: 20px;\n    }\n\n    .modal-overlay.active {\n      opacity: 1 !important;\n      visibility: visible !important;\n    }\n\n    .modal-content {\n      background-color: var(--card-bg);\n      border: 1px solid var(--border-color);\n      border-radius: 24px;\n      max-width: 650px;\n      width: 100%;\n      max-height: 85vh;\n      overflow-y: auto;\n      padding: 30px;\n      position: relative;\n      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);\n      margin: auto;\n    }\n\n    .modal-close {\n      position: absolute;\n      top: 20px;\n      right: 20px;\n      background: transparent;\n      border: none;\n      color: var(--text-muted);\n      font-size: 28px;\n      cursor: pointer;\n      line-height: 1;\n    }\n\n    .modal-close:hover {\n      color: var(--text-light);\n    }\n\n    .modal-body h2 {\n      font-size: 24px;\n      margin: 15px 0;\n      color: #fff;\n    }\n\n    .modal-body .article-text {\n      color: var(--text-light);\n      font-size: 16px;\n      line-height: 1.7;\n    }\n\n    .modal-body .article-text p {\n      margin-bottom: 15px;\n    }\n\n    \/* Sk\u00e6rm-tilpasning (Desktop & Tablet) *\/\n    @media (min-width: 768px) {\n      .blog-header h1 {\n        font-size: 48px;\n      }\n\n      .featured-content {\n        padding: 40px;\n      }\n\n      .featured-content h2 {\n        font-size: 30px;\n      }\n\n      .articles-grid {\n        grid-template-columns: repeat(2, 1fr);\n      }\n\n      .modal-content {\n        padding: 40px;\n      }\n\n      .modal-body h2 {\n        font-size: 28px;\n      }\n    }\n\n    @media (min-width: 1024px) {\n      .articles-grid {\n        grid-template-columns: repeat(3, 1fr);\n      }\n    }\n  <\/style>\n<\/head>\n<body>\n\n  <main class=\"container\">\n    \n    <header class=\"blog-header\">\n      <div class=\"badge\">Viden &#038; Inspiration<\/div>\n      <h1>Aktuelt &#038; for <span>de unge<\/span><\/h1>\n      <p>F\u00e5 de nyeste guider, historier fra andre unge og h\u00e5ndgribelige r\u00e5d til at tage styringen.<\/p>\n    <\/header>\n\n    <div id=\"featuredContainer\"><\/div>\n\n    <h2 class=\"grid-title\">Seneste opdateringer<\/h2>\n    <div id=\"articlesGrid\" class=\"articles-grid\"><\/div>\n\n  <\/main>\n\n  <div id=\"articleModal\" class=\"modal-overlay\">\n    <div class=\"modal-content\">\n      <button class=\"modal-close\" onclick=\"lukModal()\">&times;<\/button>\n      <div class=\"modal-body\" id=\"modalBody\"><\/div>\n    <\/div>\n  <\/div>\n\n  <script>\n    const mineIndlaeg = [\n      {\n        titel: \"Hvad sker der, n\u00e5r jeg finder noget, jeg synes er sp\u00e6ndende?\",\n        kategori: \"GUIDES & R\u00c5D\",\n        dato: \"13. August 2026\",\n        beskrivelse: \"Du kan kontakte organisationen direkte igennem platformen eller f\u00e5 hj\u00e6lp fra vores r\u00e5dgivning til at tage den f\u00f8rste kontakt.\",\n        indhold: \"<p>Du kan kontakte organisationen direkte igennem platformen eller f\u00e5 hj\u00e6lp fra vores r\u00e5dgivning til at tage den f\u00f8rste kontakt. Vi st\u00f8tter dig hele vejen, sikrer at du f\u00e5r svar p\u00e5 dine sp\u00f8rgsm\u00e5l, og hj\u00e6lper dig godt i gang.<\/p><p>N\u00e5r du r\u00e6kker ud, beh\u00f8ver du ikke have alle svarene klar p\u00e5 forh\u00e5nd. Det vigtigste er blot, at du udviser interesse. Vi kan hj\u00e6lpe dig med at formulere de f\u00f8rste beskeder eller tage med til den f\u00f8rste samtale, hvis du \u00f8nsker en at l\u00e6ne dig op ad.<\/p>\"\n      },\n      {\n        titel: \"Tag et skridt du ikke troede du kunne\",\n        kategori: \"R\u00c5DGIVNING\",\n        dato: \"05. August 2026\",\n        beskrivelse: \"Er du havnet p\u00e5 den forkerte hylde? Se hvordan du nemt tager styringen tilbage og finder et f\u00e6llesskab, der passer til dig.\",\n        indhold: \"<p>Er du havnet p\u00e5 den forkerte hylde? Se hvordan du nemt tager styringen tilbage og finder et f\u00e6llesskab, der passer til dig.<\/p><p>Det er helt normalt at tvivle p\u00e5 sine valg. Mange unge oplever at starte p\u00e5 en uddannelse eller i en fritidsaktivitet, som ikke f\u00f8les rigtig. Det vigtigste er at huske, at intet er spildt \u2013 alle erfaringer g\u00f8r dig klogere p\u00e5, hvad du i stedet vil.<\/p>\"\n      },\n      {\n        titel: \"Virker det sv\u00e6rer end det burde v\u00e6re?\",\n        kategori: \"GUIDES & R\u00c5D\",\n        dato: \"28. Juli 2026\",\n        beskrivelse: \"En enkel trin-for-trin guide til at f\u00e5 en finger med i spillet og g\u00f8re din stemme g\u00e6ldende i lokale unger\u00e5d.\",\n        indhold: \"<p>En enkel trin-for-trin guide til at f\u00e5 en finger med i spillet og g\u00f8re din stemme g\u00e6ldende i lokale unger\u00e5d.<\/p><p>Lokale unger\u00e5d og ungepaneler leder altid efter nye stemmer. Du beh\u00f8ver ingen politisk erfaring for at v\u00e6re med \u2013 blot en lyst til at g\u00f8re en forskel for dig selv og andre unge i dit n\u00e6romr\u00e5de.<\/p>\"\n      },\n      {\n        titel: \"S\u00e5dan finder du tryghed i nye grupper\",\n        kategori: \"F\u00c6LLESSKAB\",\n        dato: \"15. Juli 2026\",\n        beskrivelse: \"Det kan v\u00e6re gr\u00e6nseoverskridende at starte et nyt sted. F\u00e5 YouthDirections bedste tips til en tryg opstart.\",\n        indhold: \"<p>Det kan v\u00e6re gr\u00e6nseoverskridende at starte et nyt sted. F\u00e5 YouthDirections bedste tips til en tryg opstart.<\/p><p>Start i det sm\u00e5: Du beh\u00f8ver ikke v\u00e6re den, der r\u00e5ber h\u00f8jest. Lyt, observationer og del ud af dig selv i dit eget tempo. Husk p\u00e5, at de fleste i gruppen har pr\u00f8vet at v\u00e6re nye og har fuld forst\u00e5else for situationen.<\/p>\"\n      }\n    ];\n\n    \/\/ Flyt popup til selve <body> for at undg\u00e5 at WordPress-temaer fastholder den i en undersektion\n    document.addEventListener(\"DOMContentLoaded\", function() {\n      const modal = document.getElementById('articleModal');\n      if (modal) {\n        document.body.appendChild(modal);\n      }\n    });\n\n    function visIndlaeg() {\n      const featuredContainer = document.getElementById('featuredContainer');\n      const gridContainer = document.getElementById('articlesGrid');\n\n      if (mineIndlaeg.length === 0) return;\n\n      const fremhaevet = mineIndlaeg[0];\n\n      featuredContainer.innerHTML = `\n        <section class=\"featured-article\">\n          <div class=\"featured-content\">\n            <span class=\"article-meta\">${fremhaevet.dato} \u2022 ${fremhaevet.kategori}<\/span>\n            <h2>${fremhaevet.titel}<\/h2>\n            <p>${fremhaevet.beskrivelse}<\/p>\n            <div>\n              <button onclick=\"aabnModal(0)\" class=\"btn-primary\">L\u00e6s mere &rarr;<\/button>\n            <\/div>\n          <\/div>\n        <\/section>\n      `;\n\n      gridContainer.innerHTML = '';\n      for (let i = 1; i < mineIndlaeg.length; i++) {\n        const indlaeg = mineIndlaeg[i];\n        const card = document.createElement('div');\n        card.className = 'article-card';\n        card.innerHTML = `\n          <div>\n            <span class=\"article-meta\">${indlaeg.dato} \u2022 ${indlaeg.kategori}<\/span>\n            <h3>${indlaeg.titel}<\/h3>\n            <p>${indlaeg.beskrivelse}<\/p>\n          <\/div>\n          <div class=\"article-footer\">\n            <button onclick=\"aabnModal(${i})\" class=\"read-link\">L\u00e6s mere &rarr;<\/button>\n          <\/div>\n        `;\n        gridContainer.appendChild(card);\n      }\n    }\n\n    function aabnModal(index) {\n      const indlaeg = mineIndlaeg[index];\n      const modalBody = document.getElementById('modalBody');\n      const modal = document.getElementById('articleModal');\n\n      modalBody.innerHTML = `\n        <span class=\"article-meta\">${indlaeg.dato} \u2022 ${indlaeg.kategori}<\/span>\n        <h2>${indlaeg.titel}<\/h2>\n        <div class=\"article-text\">\n          ${indlaeg.indhold || indlaeg.beskrivelse}\n        <\/div>\n      `;\n\n      modal.classList.add('active');\n      document.body.style.overflow = 'hidden';\n    }\n\n    function lukModal() {\n      const modal = document.getElementById('articleModal');\n      modal.classList.remove('active');\n      document.body.style.overflow = '';\n    }\n\n    document.getElementById('articleModal').addEventListener('click', function(e) {\n      if (e.target === this) {\n        lukModal();\n      }\n    });\n\n    visIndlaeg();\n  <\/script>\n<\/body>\n<\/html>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>YouthDirection &#8211; Aktuelt &#038; for de unge Viden &#038; Inspiration Aktuelt &#038; for de unge F\u00e5 de nyeste guider, historier fra andre unge og h\u00e5ndgribelige r\u00e5d til at tage styringen. Seneste opdateringer &times;<\/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-502","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/youthdirection.com\/en\/wp-json\/wp\/v2\/pages\/502","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=502"}],"version-history":[{"count":7,"href":"https:\/\/youthdirection.com\/en\/wp-json\/wp\/v2\/pages\/502\/revisions"}],"predecessor-version":[{"id":549,"href":"https:\/\/youthdirection.com\/en\/wp-json\/wp\/v2\/pages\/502\/revisions\/549"}],"wp:attachment":[{"href":"https:\/\/youthdirection.com\/en\/wp-json\/wp\/v2\/media?parent=502"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}