{"id":11,"date":"2026-03-13T15:56:39","date_gmt":"2026-03-13T15:56:39","guid":{"rendered":"https:\/\/itdd.au.dk\/single-user-mode\/?page_id=11"},"modified":"2026-05-05T11:11:06","modified_gmt":"2026-05-05T11:11:06","slug":"design","status":"publish","type":"page","link":"https:\/\/itdd.au.dk\/single-user-mode\/","title":{"rendered":"Start her"},"content":{"rendered":"\n\n\n<div class=\"wp-block-columns alignwide has-base-color has-custom-color-1-background-color has-text-color has-background has-link-color wp-elements-5b8c7ec86a90b64268ab1ae2e4bebe54 is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-stretch has-custom-color-1-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<p class=\"is-style-text-display has-beiruti-font-family has-x-large-font-size is-style-text-display--1\"><strong>Single User Mode<\/strong> er mit designrum \u2014 et sted for id\u00e9er, fors\u00f8g og refleksioner.<br>Jeg arbejder alene, men l\u00e6ring bliver til i samspillet mellem egne tanker, andres perspektiver og det f\u00e6lles faglige rum.<\/p>\n\n\n\n<div style=\"height:7px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"ommig-wrap\">\n  <button class=\"ommig-trigger\" id=\"openOmMig\" type=\"button\" aria-label=\"\u00c5bn Om mig\">\n    <span class=\"ommig-trigger__base\" aria-hidden=\"true\">\n      <span class=\"ommig-trigger__eyes\">\n        <span class=\"ommig-trigger__eye\">\n          <span class=\"ommig-trigger__pupil\"><\/span>\n        <\/span>\n        <span class=\"ommig-trigger__eye\">\n          <span class=\"ommig-trigger__pupil\"><\/span>\n        <\/span>\n      <\/span>\n    <\/span>\n\n    <span class=\"ommig-trigger__cover\">\n      <span class=\"ommig-trigger__text\">Her er jeg<\/span>\n    <\/span>\n  <\/button>\n\n  <div class=\"ommig-modal\" id=\"omMigModal\" aria-hidden=\"true\">\n    <div class=\"ommig-backdrop\"><\/div>\n\n    <div class=\"ommig-panel\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"ommig-title\">\n      <button class=\"ommig-close\" id=\"closeOmMig\" aria-label=\"Luk popup\">\u00d7<\/button>\n\n      <div class=\"ommig-layout\">\n        <aside class=\"ommig-visual\">\n          <div class=\"ommig-board\">\n            <div class=\"ommig-portrait-note\">\n              <span class=\"ommig-tape ommig-tape--1\"><\/span>\n              <span class=\"ommig-tape ommig-tape--2\"><\/span>\n\n              <img decoding=\"async\"\n                class=\"ommig-portrait\"\n                src=\"https:\/\/itdd.au.dk\/blog-not-found\/wp-content\/uploads\/sites\/43\/2025\/09\/karina.jpg\"\n                alt=\"Karina Toftegaard\"\n              \/>\n            <\/div>\n\n            <div class=\"ommig-mini-note ommig-mini-note--1\">design<\/div>\n            <div class=\"ommig-mini-note ommig-mini-note--2\">l\u00e6ring<\/div>\n            <div class=\"ommig-mini-note ommig-mini-note--3\">f\u00e6llesskab<\/div>\n            <div class=\"ommig-mini-note ommig-mini-note--4\">proces<\/div>\n          <\/div>\n        <\/aside>\n\n        <div class=\"ommig-content\">\n          <div class=\"ommig-kicker\">Single User Mode<\/div>\n          <h2 id=\"ommig-title\">Om mig<\/h2>\n\n          <div class=\"ommig-copy\">\n            <div class=\"ommig-copy-pin\"><\/div>\n\n            <p>\n              Jeg hedder Karina Toftegaard og l\u00e6ser it-didaktisk design. Ved siden af studiet arbejder jeg p\u00e5 N\u00c1M og interesserer mig for m\u00f8det mellem design, l\u00e6ring og didaktik.\n            <\/p>\n\n            <p>\n              Jeg er optaget af processer, f\u00e6llesskaber og id\u00e9er, der f\u00e5r form gennem fors\u00f8g, justeringer og refleksion.\n            <\/p>\n\n            <p>\n              Denne side er mit rum i designmodulet \u2014 et sted til det uf\u00e6rdige, det unders\u00f8gende og det, der er ved at blive til.\n            <\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\n  .ommig-wrap {\n    position: relative;\n    z-index: 20;\n    display: inline-block;\n    font-family: inherit;\n  }\n\n  \/* KNAP: BEHOLDT SOM DIN *\/\n  .ommig-trigger {\n    --ommig-red: #df001b;\n    --ommig-red-dark: #a80014;\n    --ommig-red-light: #ff2138;\n    --ommig-dark: #12090a;\n    --ommig-black-frame: #000000;\n    --ommig-cream: #fffaf7;\n\n    position: relative;\n    display: inline-block;\n    width: 220px;\n    height: 68px;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    cursor: pointer;\n    font: inherit;\n    -webkit-tap-highlight-color: transparent;\n    touch-action: manipulation;\n  }\n\n  .ommig-trigger:focus-visible {\n    outline: 2px solid rgba(223, 0, 27, 0.35);\n    outline-offset: 4px;\n  }\n\n  .ommig-trigger__base {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    border-radius: 18px;\n    background: linear-gradient(180deg, #2a1819 0%, #140a0b 100%);\n    border: 3px solid var(--ommig-black-frame);\n    box-shadow:\n      0 16px 34px rgba(20, 8, 8, 0.28),\n      inset 0 1px 0 rgba(255,255,255,0.05);\n    overflow: hidden;\n  }\n\n  .ommig-trigger__eyes {\n    position: absolute;\n    top: 50%;\n    right: 18px;\n    transform: translateY(-50%);\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: 10px;\n    width: 64px;\n    pointer-events: none;\n  }\n\n  .ommig-trigger__eye {\n    position: relative;\n    width: 20px;\n    height: 20px;\n    background: #ffffff;\n    border-radius: 50%;\n    overflow: hidden;\n    box-shadow:\n      inset 0 0 0 1px rgba(0,0,0,0.08),\n      0 2px 4px rgba(0,0,0,0.18);\n    animation: ommig-eye-blink 3.4s infinite;\n    transform-origin: center center;\n  }\n\n  .ommig-trigger__pupil {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 9px;\n    height: 9px;\n    background: #111;\n    border-radius: 50%;\n    transform: translate(-50%, -50%);\n    transition: transform 0.08s linear;\n  }\n\n  .ommig-trigger__cover {\n    position: absolute;\n    inset: 0;\n    z-index: 3;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 18px;\n    border: 3px solid var(--ommig-black-frame);\n    background: linear-gradient(\n      180deg,\n      var(--ommig-red-light) 0%,\n      var(--ommig-red) 52%,\n      var(--ommig-red-dark) 100%\n    );\n    box-shadow:\n      0 14px 28px rgba(160, 0, 20, 0.28),\n      inset 0 1px 0 rgba(255,255,255,0.16),\n      inset 0 -10px 16px rgba(0,0,0,0.18);\n    transform-origin: 16px 50%;\n    transition:\n      transform 0.42s cubic-bezier(0.65, 0, 0.35, 1),\n      box-shadow 0.25s ease,\n      background 0.25s ease;\n    will-change: transform;\n  }\n\n  .ommig-trigger:hover .ommig-trigger__cover,\n  .ommig-trigger:focus-visible .ommig-trigger__cover {\n    transform: perspective(700px) rotate(-18deg) translateX(-16px) translateY(-4px);\n    box-shadow:\n      0 20px 34px rgba(160, 0, 20, 0.3),\n      inset 0 1px 0 rgba(255,255,255,0.16),\n      inset 0 -10px 16px rgba(0,0,0,0.18);\n  }\n\n  .ommig-trigger:active .ommig-trigger__cover {\n    transform: perspective(700px) rotate(-8deg) translateX(-7px) translateY(-2px);\n  }\n\n  .ommig-trigger__text {\n    display: block;\n    width: 100%;\n    text-align: center;\n    font-family: \"Helvetica Neue\", Arial, sans-serif;\n    font-size: 14px;\n    font-weight: 700;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n    line-height: 1;\n    color: #fffaf7;\n  }\n\n  @keyframes ommig-eye-blink {\n    0%, 90%, 100% {\n      transform: scaleY(1);\n    }\n    94% {\n      transform: scaleY(0.08);\n    }\n  }\n\n  \/* POPUP: NY STIL *\/\n  .ommig-modal {\n    position: fixed;\n    inset: 0;\n    z-index: 99999;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding:\n      max(16px, env(safe-area-inset-top))\n      max(16px, env(safe-area-inset-right))\n      max(16px, env(safe-area-inset-bottom))\n      max(16px, env(safe-area-inset-left));\n    opacity: 0;\n    visibility: hidden;\n    pointer-events: none;\n    transition: opacity 0.24s ease, visibility 0.24s ease;\n  }\n\n  .ommig-modal.is-open {\n    opacity: 1;\n    visibility: visible;\n    pointer-events: auto;\n  }\n\n  .ommig-backdrop {\n    position: absolute;\n    inset: 0;\n    background: rgba(21, 16, 14, 0.62);\n    backdrop-filter: blur(4px);\n    -webkit-backdrop-filter: blur(4px);\n  }\n\n  .ommig-panel {\n    position: relative;\n    z-index: 2;\n    width: min(980px, 100%);\n    max-height: min(88vh, 88dvh);\n    overflow-x: hidden;\n    overflow-y: auto;\n    -webkit-overflow-scrolling: touch;\n    overscroll-behavior: contain;\n    padding: 30px 28px 26px;\n    background:\n      linear-gradient(180deg, #f5ecdc 0%, #efe4d2 100%);\n    border-radius: 20px;\n    border: 1px solid rgba(57, 45, 38, 0.12);\n    box-shadow:\n      0 26px 60px rgba(0,0,0,0.24),\n      inset 0 1px 0 rgba(255,255,255,0.62);\n    color: #2b2522;\n    transform: translateY(12px) scale(0.985);\n    transition: transform 0.24s ease, opacity 0.24s ease;\n    opacity: 0;\n  }\n\n  .ommig-modal.is-open .ommig-panel {\n    transform: translateY(0) scale(1);\n    opacity: 1;\n  }\n\n  .ommig-layout {\n    display: grid;\n    grid-template-columns: 300px 1fr;\n    gap: 34px;\n    align-items: center;\n    margin-top: 6px;\n  }\n\n  .ommig-visual {\n    position: relative;\n  }\n\n  .ommig-board {\n    position: relative;\n    min-height: 390px;\n    padding: 20px;\n    border-radius: 18px;\n    background:\n      linear-gradient(180deg, #8c5428 0%, #75431e 100%);\n    box-shadow:\n      inset 0 1px 0 rgba(255,255,255,0.10),\n      0 14px 26px rgba(0,0,0,0.14);\n  }\n\n  .ommig-portrait-note {\n    position: relative;\n    width: 240px;\n    margin: 28px auto 0;\n    padding: 14px 14px 18px;\n    background: #fffefb;\n    border-radius: 6px;\n    box-shadow:\n      0 14px 24px rgba(0,0,0,0.14),\n      0 1px 0 rgba(255,255,255,0.7) inset;\n    transform: rotate(-2.2deg);\n  }\n\n  .ommig-tape {\n    position: absolute;\n    top: -10px;\n    width: 64px;\n    height: 18px;\n    background: rgba(236, 223, 180, 0.72);\n    border-radius: 2px;\n    box-shadow: 0 1px 2px rgba(0,0,0,0.06);\n  }\n\n  .ommig-tape--1 {\n    left: 18px;\n    transform: rotate(-8deg);\n  }\n\n  .ommig-tape--2 {\n    right: 18px;\n    transform: rotate(7deg);\n  }\n\n  .ommig-portrait {\n    display: block;\n    width: 100%;\n    aspect-ratio: 1 \/ 1;\n    object-fit: cover;\n    border-radius: 4px;\n  }\n\n  .ommig-mini-note {\n    position: absolute;\n    padding: 10px 12px;\n    border-radius: 3px;\n    box-shadow: 0 10px 18px rgba(0,0,0,0.14);\n    font-size: 0.72rem;\n    font-weight: 700;\n    letter-spacing: 0.02em;\n    line-height: 1;\n    color: #2b2522;\n  }\n\n  .ommig-mini-note--1 {\n    top: 18px;\n    left: 14px;\n    background: #fff1a8;\n    transform: rotate(-6deg);\n  }\n\n  .ommig-mini-note--2 {\n    top: 72px;\n    right: 10px;\n    background: #ffd9df;\n    transform: rotate(5deg);\n  }\n\n  .ommig-mini-note--3 {\n    bottom: 80px;\n    left: 8px;\n    background: #dff1ff;\n    transform: rotate(4deg);\n  }\n\n  .ommig-mini-note--4 {\n    bottom: 20px;\n    right: 16px;\n    background: #e7f4d4;\n    transform: rotate(-4deg);\n  }\n\n  .ommig-content {\n    position: relative;\n  }\n\n  .ommig-kicker {\n    display: inline-block;\n    margin-bottom: 14px;\n    padding: 7px 11px;\n    border-radius: 999px;\n    background: #b9313f;\n    color: #fff;\n    font-size: 0.72rem;\n    font-weight: 700;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n    box-shadow: 0 8px 16px rgba(185,49,63,0.16);\n  }\n\n  .ommig-panel h2 {\n    margin: 0 0 18px;\n    color: #2b2522;\n    font-size: clamp(2.3rem, 4vw, 3.6rem);\n    line-height: 0.96;\n    font-weight: 800;\n    letter-spacing: -0.04em;\n  }\n\n  .ommig-copy {\n    position: relative;\n    padding: 26px 22px 22px 26px;\n    border-radius: 8px;\n    background:\n      repeating-linear-gradient(\n        to bottom,\n        #fffefb 0px,\n        #fffefb 26px,\n        #d7e6f6 27px\n      );\n    box-shadow:\n      0 18px 36px rgba(0,0,0,0.10),\n      inset 0 1px 0 rgba(255,255,255,0.72);\n  }\n\n  .ommig-copy::before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 24px;\n    width: 1px;\n    background: rgba(224, 113, 113, 0.55);\n  }\n\n  .ommig-copy-pin {\n    position: absolute;\n    top: 12px;\n    right: 18px;\n    width: 14px;\n    height: 14px;\n    border-radius: 50%;\n    background: #bf3b46;\n    box-shadow:\n      0 0 0 3px rgba(255,255,255,0.92),\n      0 4px 8px rgba(0,0,0,0.12);\n  }\n\n  .ommig-panel p {\n    margin: 0 0 14px;\n    padding-left: 14px;\n    font-size: 1rem;\n    line-height: 1.72;\n    font-weight: 500;\n    max-width: 60ch;\n    color: #2d2926;\n  }\n\n  .ommig-panel p:last-child {\n    margin-bottom: 0;\n  }\n\n  .ommig-close {\n    position: absolute;\n    top: 14px;\n    right: 14px;\n    z-index: 6;\n    width: 42px;\n    height: 42px;\n    min-width: 42px;\n    min-height: 42px;\n    border: 0;\n    border-radius: 999px;\n    background: rgba(43, 37, 34, 0.08);\n    color: #2b2522;\n    font-size: 1.4rem;\n    line-height: 1;\n    cursor: pointer;\n    transition: transform 0.18s ease, background 0.18s ease;\n    -webkit-appearance: none;\n    appearance: none;\n    touch-action: manipulation;\n  }\n\n  .ommig-close:hover,\n  .ommig-close:active {\n    transform: scale(1.04);\n    background: rgba(43, 37, 34, 0.14);\n  }\n\n  .ommig-close:focus-visible {\n    outline: 2px solid rgba(185,49,63,0.24);\n    outline-offset: 3px;\n  }\n\n  body.ommig-no-scroll {\n    overflow: hidden;\n    position: fixed;\n    width: 100%;\n    left: 0;\n    right: 0;\n  }\n\n  @media (max-width: 860px) {\n    .ommig-layout {\n      grid-template-columns: 1fr;\n      gap: 18px;\n    }\n\n    .ommig-board {\n      min-height: 300px;\n    }\n\n    .ommig-portrait-note {\n      width: min(220px, 72vw);\n    }\n  }\n\n  @media (max-width: 640px) {\n    .ommig-modal {\n      align-items: flex-start;\n      padding:\n        max(10px, env(safe-area-inset-top))\n        max(10px, env(safe-area-inset-right))\n        max(12px, env(safe-area-inset-bottom))\n        max(10px, env(safe-area-inset-left));\n    }\n\n    .ommig-trigger {\n      width: 188px;\n      height: 60px;\n    }\n\n    .ommig-trigger__base,\n    .ommig-trigger__cover {\n      border-radius: 16px;\n    }\n\n    .ommig-trigger__text {\n      font-size: 13px;\n    }\n\n    .ommig-trigger__eyes {\n      right: 14px;\n      width: 56px;\n      gap: 8px;\n    }\n\n    .ommig-trigger__eye {\n      width: 18px;\n      height: 18px;\n    }\n\n    .ommig-trigger__pupil {\n      width: 8px;\n      height: 8px;\n    }\n\n    .ommig-trigger:hover .ommig-trigger__cover,\n    .ommig-trigger:focus-visible .ommig-trigger__cover {\n      transform: perspective(700px) rotate(-16deg) translateX(-13px) translateY(-3px);\n    }\n\n    .ommig-panel {\n      width: 100%;\n      max-height: calc(100dvh - 20px);\n      border-radius: 18px;\n      padding: 22px 16px 18px;\n    }\n\n    .ommig-panel h2 {\n      font-size: clamp(2rem, 9vw, 2.9rem);\n      margin-bottom: 14px;\n    }\n\n    .ommig-copy {\n      padding: 22px 14px 16px 20px;\n    }\n\n    .ommig-copy::before {\n      left: 18px;\n    }\n\n    .ommig-panel p {\n      padding-left: 12px;\n      font-size: 0.96rem;\n      line-height: 1.58;\n    }\n\n    .ommig-mini-note {\n      font-size: 0.6rem;\n      padding: 7px 9px;\n    }\n\n    .ommig-mini-note--1 { top: 0; left: 10px; }\n    .ommig-mini-note--2 { top: 34px; right: 8px; }\n    .ommig-mini-note--3 { bottom: 58px; left: 10px; }\n    .ommig-mini-note--4 { bottom: 12px; right: 12px; }\n\n    .ommig-close {\n      top: 10px;\n      right: 10px;\n      width: 40px;\n      height: 40px;\n      font-size: 1.3rem;\n    }\n  }\n<\/style>\n\n<script>\n(function () {\n  var openBtn = document.getElementById(\"openOmMig\");\n  var closeBtn = document.getElementById(\"closeOmMig\");\n  var modal = document.getElementById(\"omMigModal\");\n  var backdrop = modal ? modal.querySelector(\".ommig-backdrop\") : null;\n  var body = document.body;\n  var scrollY = 0;\n\n  if (!openBtn || !closeBtn || !modal) return;\n\n  modal.classList.remove(\"is-open\");\n  modal.setAttribute(\"aria-hidden\", \"true\");\n\n  function openModal() {\n    scrollY = window.scrollY || window.pageYOffset || 0;\n    modal.classList.add(\"is-open\");\n    modal.setAttribute(\"aria-hidden\", \"false\");\n    body.classList.add(\"ommig-no-scroll\");\n    body.style.top = \"-\" + scrollY + \"px\";\n    closeBtn.focus();\n  }\n\n  function closeModal() {\n    modal.classList.remove(\"is-open\");\n    modal.setAttribute(\"aria-hidden\", \"true\");\n    body.classList.remove(\"ommig-no-scroll\");\n    body.style.top = \"\";\n    window.scrollTo(0, scrollY);\n    openBtn.focus();\n  }\n\n  openBtn.addEventListener(\"click\", function (e) {\n    e.preventDefault();\n    openModal();\n  });\n\n  closeBtn.addEventListener(\"click\", function () {\n    closeModal();\n  });\n\n  if (backdrop) {\n    backdrop.addEventListener(\"click\", function () {\n      closeModal();\n    });\n  }\n\n  document.addEventListener(\"keydown\", function (e) {\n    if (e.key === \"Escape\" && modal.classList.contains(\"is-open\")) {\n      closeModal();\n    }\n  });\n\n  window.addEventListener(\"pageshow\", function () {\n    modal.classList.remove(\"is-open\");\n    modal.setAttribute(\"aria-hidden\", \"true\");\n    body.classList.remove(\"ommig-no-scroll\");\n    body.style.top = \"\";\n  });\n\n  var eyesWrap = openBtn.querySelector(\".ommig-trigger__eyes\");\n  var pupils = openBtn.querySelectorAll(\".ommig-trigger__pupil\");\n\n  function updateEyes(clientX, clientY) {\n    if (!eyesWrap || !pupils.length) return;\n\n    var rect = eyesWrap.getBoundingClientRect();\n    var centerX = rect.left + rect.width \/ 2;\n    var centerY = rect.top + rect.height \/ 2;\n\n    var dx = clientX - centerX;\n    var dy = clientY - centerY;\n\n    var moveX = Math.max(-5, Math.min(5, dx \/ 18));\n    var moveY = Math.max(-4, Math.min(4, dy \/ 18));\n\n    pupils.forEach(function (pupil) {\n      pupil.style.transform =\n        \"translate(calc(-50% + \" + moveX + \"px), calc(-50% + \" + moveY + \"px))\";\n    });\n  }\n\n  function resetEyes() {\n    pupils.forEach(function (pupil) {\n      pupil.style.transform = \"translate(-50%, -50%)\";\n    });\n  }\n\n  openBtn.addEventListener(\"mousemove\", function (e) {\n    updateEyes(e.clientX, e.clientY);\n  });\n\n  openBtn.addEventListener(\"mouseleave\", resetEyes);\n\n  openBtn.addEventListener(\"touchmove\", function (e) {\n    if (!e.touches || !e.touches[0]) return;\n    updateEyes(e.touches[0].clientX, e.touches[0].clientY);\n  }, { passive: true });\n\n  openBtn.addEventListener(\"touchend\", resetEyes);\n})();\n<\/script>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-custom-color-1-background-color has-background has-global-padding is-layout-constrained wp-block-column-is-layout-constrained\" style=\"flex-basis:66.66%\">\n<a class=\"discover-scene-link\" href=\"https:\/\/itdd.au.dk\/single-user-mode\/discover\/\" aria-label=\"G\u00e5 til Discover\">\n  <div class=\"discover-scene\" id=\"discoverScene\">\n    <span class=\"discover-scene__label\">Discover<\/span>\n    <span class=\"discover-scene__eyes-wrap\" id=\"discoverEyesWrap\">\n      <span class=\"discover-scene__eye\">\n        <span class=\"discover-scene__pupil\"><\/span>\n      <\/span>\n      <span class=\"discover-scene__eye\">\n        <span class=\"discover-scene__pupil\"><\/span>\n      <\/span>\n    <\/span>\n  <\/div>\n<\/a>\n\n<style>\n.discover-scene-link {\n  display: block;\n  width: 100%;\n  text-decoration: none;\n}\n\n.discover-scene {\n  width: 100%;\n  height: 60svh;\n  min-height: 360px;\n  max-height: 720px;\n  margin: 0;\n  position: relative;\n  overflow: hidden;\n  background-color: #140607;\n  background-image:\n    linear-gradient(to top, #341315 5%, #140607 6%, #140607 7%, transparent 7%),\n    linear-gradient(to bottom, #140607 30%, transparent 30%),\n\n    linear-gradient(to right, #321719, #432224 5%, transparent 5%),\n    linear-gradient(to right, transparent 6%, #ff1a2f 6%, #df001b 9%, transparent 9%),\n    linear-gradient(to right, transparent 27%, #e3001c 27%, #b80016 34%, transparent 34%),\n    linear-gradient(to right, transparent 51%, #c41526 51%, #930012 57%, transparent 57%),\n\n    linear-gradient(to bottom, #140607 35%, transparent 35%),\n    linear-gradient(to right, transparent 42%, #9f0015 42%, #730010 44%, transparent 44%),\n    linear-gradient(to right, transparent 45%, #d1001c 45%, #960014 47%, transparent 47%),\n    linear-gradient(to right, transparent 48%, #f0001d 48%, #b30017 50%, transparent 50%),\n    linear-gradient(to right, transparent 87%, #82121f 87%, #5e0b16 91%, transparent 91%),\n\n    linear-gradient(to bottom, #140607 37.5%, transparent 37.5%),\n    linear-gradient(to right, transparent 14%, #b31222 14%, #7e0d18 20%, transparent 20%),\n\n    linear-gradient(to bottom, #140607 40%, transparent 40%),\n    linear-gradient(to right, transparent 10%, #df001b 10%, #a40015 13%, transparent 13%),\n    linear-gradient(to right, transparent 21%, #a82810 21%, #781707 25%, transparent 25%),\n    linear-gradient(to right, transparent 58%, #b50019 58%, #7d0010 64%, transparent 64%),\n    linear-gradient(to right, transparent 92%, #7f1322 92%, #570b16 95%, transparent 95%),\n\n    linear-gradient(to bottom, #140607 48%, transparent 48%),\n    linear-gradient(to right, transparent 96%, #cf001b 96%, #8f0012 99%, transparent 99%),\n    linear-gradient(\n      to bottom,\n      transparent 68.5%,\n      transparent 76%,\n      #140607 76%,\n      #140607 77.5%,\n      transparent 77.5%,\n      transparent 86%,\n      #140607 86%,\n      #140607 87.5%,\n      transparent 87.5%\n    ),\n    linear-gradient(to right, transparent 35%, #9c1726 35%, #6f0d19 41%, transparent 41%),\n\n    linear-gradient(to bottom, #140607 68%, transparent 68%),\n    linear-gradient(\n      to right,\n      transparent 78%,\n      #8e4954 78%,\n      #8e4954 80%,\n      transparent 80%,\n      transparent 82%,\n      #b06a73 82%,\n      #b06a73 83%,\n      transparent 83%\n    ),\n    linear-gradient(to right, transparent 66%, #8b1b2a 66%, #5e0d19 85%, transparent 85%);\n  background-size: 300px 150px;\n  background-position: center bottom;\n  transform-origin: 58% 78%;\n  animation: discoverZoom 7000ms forwards ease-in-out;\n  box-shadow:\n    inset 0 0 140px rgba(0, 0, 0, 0.52),\n    inset 0 0 100px rgba(16, 2, 5, 0.42),\n    inset 0 0 80px rgba(110, 18, 28, 0.14);\n}\n\n.discover-scene::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: rgba(10, 2, 4, 0.42);\n  z-index: 1;\n  pointer-events: none;\n}\n\n.discover-scene::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  background-color: rgba(18, 3, 5, 0.96);\n  background-image:\n    linear-gradient(to top, #d22b3d 5%, #140607 6%, #140607 7%, transparent 7%),\n    linear-gradient(to bottom, #140607 30%, transparent 30%),\n\n    linear-gradient(to right, #ff1830, #c80018 5%, transparent 5%),\n    linear-gradient(to right, transparent 6%, #ff4d5e 6%, #d91a2d 9%, transparent 9%),\n    linear-gradient(to right, transparent 27%, #ff283c 27%, #b80016 34%, transparent 34%),\n    linear-gradient(to right, transparent 51%, #d82a37 51%, #930012 57%, transparent 57%),\n\n    linear-gradient(to bottom, #140607 35%, transparent 35%),\n    linear-gradient(to right, transparent 42%, #b10017 42%, #770010 44%, transparent 44%),\n    linear-gradient(to right, transparent 45%, #d9001c 45%, #990014 47%, transparent 47%),\n    linear-gradient(to right, transparent 48%, #ff2337 48%, #b70017 50%, transparent 50%),\n    linear-gradient(to right, transparent 87%, #9d1727 87%, #67101b 91%, transparent 91%),\n\n    linear-gradient(to bottom, #140607 37.5%, transparent 37.5%),\n    linear-gradient(to right, transparent 14%, #c42030 14%, #8a1320 20%, transparent 20%),\n\n    linear-gradient(to bottom, #140607 40%, transparent 40%),\n    linear-gradient(to right, transparent 10%, #e0001b 10%, #a80015 13%, transparent 13%),\n    linear-gradient(to right, transparent 21%, #b33418 21%, #7f1d0b 25%, transparent 25%),\n    linear-gradient(to right, transparent 58%, #c20019 58%, #860011 64%, transparent 64%),\n    linear-gradient(to right, transparent 92%, #982031 92%, #65101d 95%, transparent 95%),\n\n    linear-gradient(to bottom, #140607 48%, transparent 48%),\n    linear-gradient(to right, transparent 96%, #dc001c 96%, #980013 99%, transparent 99%),\n    linear-gradient(\n      to bottom,\n      transparent 68.5%,\n      transparent 76%,\n      #140607 76%,\n      #140607 77.5%,\n      transparent 77.5%,\n      transparent 86%,\n      #140607 86%,\n      #140607 87.5%,\n      transparent 87.5%\n    ),\n    linear-gradient(to right, transparent 35%, #b32031 35%, #7a1220 41%, transparent 41%),\n\n    linear-gradient(to bottom, #140607 68%, transparent 68%),\n    linear-gradient(\n      to right,\n      transparent 78%,\n      #b26e76 78%,\n      #b26e76 80%,\n      transparent 80%,\n      transparent 82%,\n      #c68a91 82%,\n      #c68a91 83%,\n      transparent 83%\n    ),\n    linear-gradient(to right, transparent 66%, #a12131 66%, #69101d 85%, transparent 85%);\n  background-size: 300px 150px;\n  background-position: center bottom;\n  clip-path: circle(150px at center center);\n  animation: flashlight 7000ms forwards;\n  mix-blend-mode: screen;\n}\n\n.discover-scene__eyes-wrap {\n  position: absolute;\n  left: calc(50% + 59px);\n  bottom: 100px;\n  width: 25px;\n  height: 10px;\n  z-index: 3;\n  opacity: 0;\n  animation: eyesAppear 7000ms forwards;\n  pointer-events: none;\n}\n\n.discover-scene__eye {\n  position: absolute;\n  top: 0;\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: #fff;\n  box-shadow:\n    0 0 8px rgba(255,255,255,0.25),\n    inset 0 -1px 2px rgba(0,0,0,0.12);\n  transform-origin: center center;\n  overflow: hidden;\n  animation: blink 3.2s infinite 7s;\n}\n\n.discover-scene__eye:first-child {\n  left: 0;\n}\n\n.discover-scene__eye:last-child {\n  right: 0;\n}\n\n.discover-scene__pupil {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background: #111;\n  transform: translate(-50%, -50%);\n  box-shadow: 0 0 2px rgba(0,0,0,0.28);\n}\n\n.discover-scene__label {\n  position: absolute;\n  left: calc(50% + 42px);\n  bottom: 66px;\n  z-index: 4;\n  color: #f2ece6;\n  font-family: inherit;\n  font-size: clamp(14px, 2vw, 22px);\n  font-weight: 700;\n  letter-spacing: 0.22em;\n  text-transform: uppercase;\n  line-height: 1;\n  opacity: 0;\n  transform: translateY(10px) scale(0.94);\n  text-shadow:\n    0 0 10px rgba(90, 22, 22, 0.18),\n    0 0 18px rgba(0, 0, 0, 0.14);\n  animation: discoverText 7000ms forwards;\n  pointer-events: none;\n}\n\n.discover-scene-link:focus-visible {\n  outline: none;\n}\n\n.discover-scene-link:focus-visible .discover-scene {\n  box-shadow:\n    inset 0 0 140px rgba(0, 0, 0, 0.52),\n    inset 0 0 100px rgba(16, 2, 5, 0.42),\n    inset 0 0 80px rgba(110, 18, 28, 0.14),\n    0 0 0 2px rgba(243, 0, 24, 0.35);\n}\n\n@keyframes flashlight {\n  0%, 9% {\n    opacity: 0;\n    clip-path: circle(150px at 45% 10%);\n  }\n  10%, 15%, 85% {\n    opacity: 1;\n  }\n  50% {\n    clip-path: circle(150px at 60% 20%);\n  }\n  54%, 100% {\n    opacity: 1;\n    clip-path: circle(150px at 55% 92%);\n  }\n}\n\n@keyframes discoverZoom {\n  0%, 48% {\n    transform: scale(1);\n    filter: saturate(1.02) hue-rotate(-3deg);\n  }\n  58% {\n    transform: scale(1.08) translateY(0);\n    filter: saturate(1.08) hue-rotate(-5deg);\n  }\n  70% {\n    transform: scale(1.18) translateY(6px);\n    filter: saturate(1.14) hue-rotate(-6deg);\n  }\n  84%, 100% {\n    transform: scale(1.18) translateY(6px);\n    filter: saturate(1.14) hue-rotate(-6deg);\n  }\n}\n\n@keyframes discoverText {\n  0%, 56% {\n    opacity: 0;\n    transform: translateY(10px) scale(0.94);\n  }\n  64% {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n@keyframes eyesAppear {\n  0%, 52% {\n    opacity: 0;\n  }\n  53%, 100% {\n    opacity: 1;\n  }\n}\n\n@keyframes blink {\n  0%, 92%, 100% {\n    transform: scaleY(1);\n    opacity: 1;\n  }\n  94%, 98% {\n    transform: scaleY(0.08);\n    opacity: 0.95;\n  }\n}\n\n\/* mobile: move discover column before text and make it full width *\/\n@media (max-width: 781px) {\n  .wp-block-column > .wp-block-columns {\n    display: flex;\n    flex-wrap: wrap !important;\n  }\n\n  .wp-block-column > .wp-block-columns > .wp-block-column:first-child {\n    order: 2;\n    flex: 0 0 100% !important;\n    max-width: 100% !important;\n  }\n\n  .wp-block-column > .wp-block-columns > .wp-block-column:last-child {\n    order: 1;\n    flex: 0 0 100% !important;\n    max-width: 100% !important;\n    padding: 0 !important;\n  }\n\n  .discover-scene-link {\n    width: 100%;\n  }\n\n  .discover-scene {\n    width: 100vw;\n    max-width: 100vw;\n    margin-left: calc(50% - 50vw);\n    margin-right: calc(50% - 50vw);\n    height: 62svh;\n    min-height: 380px;\n    max-height: none;\n    background-size: 320px 145px;\n    background-position: center bottom;\n  }\n\n  .discover-scene::before {\n    background-size: 320px 145px;\n    background-position: center bottom;\n    clip-path: circle(170px at center center);\n  }\n\n  .discover-scene__eyes-wrap {\n    left: calc(50% + 54px);\n    bottom: 92px;\n    width: 24px;\n    height: 10px;\n  }\n\n  .discover-scene__eye {\n    width: 9px;\n    height: 9px;\n  }\n\n  .discover-scene__pupil {\n    width: 3px;\n    height: 3px;\n  }\n\n  .discover-scene__label {\n    left: calc(50% + 36px);\n    bottom: 58px;\n    font-size: 16px;\n    letter-spacing: 0.14em;\n  }\n}\n\n@media (max-width: 430px) {\n  .discover-scene {\n    height: 66svh;\n    min-height: 400px;\n    background-size: 340px 150px;\n  }\n\n  .discover-scene::before {\n    background-size: 340px 150px;\n    clip-path: circle(180px at center center);\n  }\n\n  .discover-scene__eyes-wrap {\n    left: calc(50% + 50px);\n    bottom: 96px;\n  }\n\n  .discover-scene__label {\n    left: calc(50% + 32px);\n    bottom: 60px;\n  }\n}\n<\/style>\n\n<script>\n(function () {\n  const scene = document.getElementById(\"discoverScene\");\n  const eyesWrap = document.getElementById(\"discoverEyesWrap\");\n  if (!scene || !eyesWrap) return;\n\n  let active = false;\n\n  function getPoint(e) {\n    if (e.touches && e.touches[0]) {\n      return {\n        clientX: e.touches[0].clientX,\n        clientY: e.touches[0].clientY\n      };\n    }\n    return e;\n  }\n\n  function handleMove(e) {\n    if (!active) return;\n\n    const point = getPoint(e);\n    const rect = scene.getBoundingClientRect();\n    const x = (point.clientX - rect.left) \/ rect.width;\n    const y = (point.clientY - rect.top) \/ rect.height;\n\n    const moveX = (x - 0.5) * 8;\n    const moveY = (y - 0.5) * 5;\n\n    eyesWrap.style.transform =\n      \"translate(\" + moveX.toFixed(1) + \"px, \" + moveY.toFixed(1) + \"px)\";\n  }\n\n  function resetEyes() {\n    eyesWrap.style.transform = \"translate(0, 0)\";\n  }\n\n  setTimeout(function () {\n    active = true;\n  }, 7000);\n\n  scene.addEventListener(\"mousemove\", handleMove);\n  scene.addEventListener(\"mouseleave\", resetEyes);\n  scene.addEventListener(\"touchmove\", handleMove, { passive: true });\n  scene.addEventListener(\"touchend\", resetEyes);\n})();\n<\/script>\n\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignfull is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"frontpage-disable-theme-toggle\" aria-hidden=\"true\">\n  <script>\n    (function () {\n      function disableFrontPageTheme() {\n        document.body.classList.remove('sum-lightmode');\n        document.documentElement.classList.remove('sum-lightmode');\n\n        localStorage.setItem('sumThemeMode', 'dark');\n\n        var themeBtn = document.getElementById('sumThemeToggle');\n        if (themeBtn) {\n          themeBtn.style.display = 'none';\n        }\n\n        var themeLabel = document.getElementById('sumThemeLabel');\n        if (themeLabel) {\n          themeLabel.textContent = 'Lys';\n        }\n\n        var selectors = [\n          'html',\n          'body',\n          '.site',\n          '.wp-site-blocks',\n          '.site-main',\n          '.site-content',\n          'main',\n          'article',\n          '.entry-content',\n          '.wp-block-post-content',\n          '.wp-block-group',\n          '.wp-block-template-part'\n        ];\n\n        selectors.forEach(function (selector) {\n          document.querySelectorAll(selector).forEach(function (el) {\n            if (!el.closest('.sum-footer-fix')) {\n              el.style.backgroundColor = '';\n            }\n          });\n        });\n      }\n\n      disableFrontPageTheme();\n      document.addEventListener('DOMContentLoaded', disableFrontPageTheme);\n      window.addEventListener('pageshow', disableFrontPageTheme);\n    })();\n  <\/script>\n<\/div>\n\n\n\n<div class=\"frontpage-disable-theme-toggle\" aria-hidden=\"true\">\n  <script>\n    (function () {\n      function disableFrontPageTheme() {\n        document.body.classList.remove('sum-lightmode');\n        document.documentElement.classList.remove('sum-lightmode');\n\n        localStorage.setItem('sumThemeMode', 'dark');\n\n        var themeBtn = document.getElementById('sumThemeToggle');\n        if (themeBtn) {\n          themeBtn.style.display = 'none';\n        }\n\n        var themeLabel = document.getElementById('sumThemeLabel');\n        if (themeLabel) {\n          themeLabel.textContent = 'Lys';\n        }\n\n        var selectors = [\n          'html',\n          'body',\n          '.site',\n          '.wp-site-blocks',\n          '.site-main',\n          '.site-content',\n          'main',\n          'article',\n          '.entry-content',\n          '.wp-block-post-content',\n          '.wp-block-group',\n          '.wp-block-template-part'\n        ];\n\n        selectors.forEach(function (selector) {\n          document.querySelectorAll(selector).forEach(function (el) {\n            if (!el.closest('.sum-footer-fix')) {\n              el.style.backgroundColor = '';\n            }\n          });\n        });\n      }\n\n      disableFrontPageTheme();\n      document.addEventListener('DOMContentLoaded', disableFrontPageTheme);\n      window.addEventListener('pageshow', disableFrontPageTheme);\n    })();\n  <\/script>\n<\/div>\n\n<section class=\"mine-forloeb\">\n  <h2 class=\"mine-forloeb-title\">Mit projektunivers<\/h2>\n  <p class=\"mine-forloeb-subtitle\">\n    Her samler jeg proces, prototyper, refleksioner, board og selve opgaven.\n  <\/p>\n\n  <div class=\"mine-forloeb-grid\">\n\n    <a class=\"forloeb-card forloeb-card--active\" href=\"https:\/\/itdd.au.dk\/single-user-mode\/discover\/\" data-image=\"https:\/\/images.unsplash.com\/photo-1517048676732-d65bc937f952?auto=format&#038;fit=crop&#038;w=1200&#038;q=80\">\n      <div class=\"forloeb-card-bg\"><\/div>\n      <div class=\"forloeb-card-info\">\n        <h3>Discover<\/h3>\n        <p>Mit f\u00f8rste forl\u00f8b. Her begynder unders\u00f8gelsen, sp\u00f8rgsm\u00e5lene og de f\u00f8rste spor i designprocessen.<\/p>\n      <\/div>\n    <\/a>\n\n    <a class=\"forloeb-card forloeb-card--active forloeb-card--define\" href=\"https:\/\/itdd.au.dk\/single-user-mode\/define\/\" data-image=\"https:\/\/images.unsplash.com\/photo-1455390582262-044cdead277a?auto=format&#038;fit=crop&#038;w=1200&#038;q=80\">\n      <div class=\"forloeb-card-bg\"><\/div>\n      <div class=\"forloeb-card-info\">\n        <h3>Define<\/h3>\n        <p>Her samler jeg designudfordring, forskningssp\u00f8rgsm\u00e5l og forel\u00f8bige designprincipper.<\/p>\n      <\/div>\n    <\/a>\n\n    <a class=\"forloeb-card forloeb-card--active forloeb-card--develop\" href=\"https:\/\/itdd.au.dk\/single-user-mode\/develop\/\" data-image=\"https:\/\/images.unsplash.com\/photo-1498050108023-c5249f4df085?auto=format&#038;fit=crop&#038;w=1200&#038;q=80\">\n      <div class=\"forloeb-card-bg\"><\/div>\n      <div class=\"forloeb-card-info\">\n        <h3>Develop<\/h3>\n        <p>Her arbejder jeg med idekort, konceptspor, brugerinddragelse og n\u00e6ste version af designprincipperne.<\/p>\n      <\/div>\n    <\/a>\n\n    <a class=\"forloeb-card forloeb-card--active forloeb-card--prototype\" href=\"https:\/\/itdd.au.dk\/single-user-mode\/prototyper\/\" data-image=\"https:\/\/itdd.au.dk\/single-user-mode\/wp-content\/uploads\/sites\/103\/2026\/04\/ChatGPT-Image-Apr-18-2026-08_16_33-PM.png\">\n      <div class=\"forloeb-card-bg\"><\/div>\n      <div class=\"forloeb-card-info\">\n        <h3>Prototyper<\/h3>\n        <p>Her ligger mine aktuelle mockups, QR-plakat, simpel QR-side og mikrotest af ord og tone.<\/p>\n      <\/div>\n    <\/a>\n\n    <a class=\"forloeb-card forloeb-card--active forloeb-card--deliver\" href=\"https:\/\/itdd.au.dk\/single-user-mode\/deliver\/\" data-image=\"https:\/\/images.unsplash.com\/photo-1522202176988-66273c2fd55f?auto=format&#038;fit=crop&#038;w=1200&#038;q=80\">\n      <div class=\"forloeb-card-bg\"><\/div>\n\n      <div class=\"forloeb-card-notice\" aria-hidden=\"true\">\n        <div class=\"forloeb-card-notice__icon\">\n          <svg viewBox=\"0 0 1024 1024\" class=\"forloeb-card-notice__svg\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            <path d=\"M298.155 403.601c-43.565 0.395-56.901 16.984-56.901 37.934 0 20.952 15.113 37.935 56.901 37.935 41.79 0 56.905-16.984 56.905-37.935s-13.338-38.331-56.905-37.934z m227.614 0c-43.567 0.395-56.905 16.984-56.905 37.934 0 20.952 15.115 37.935 56.905 37.935 41.788 0 56.901-16.984 56.901-37.935 0.001-20.951-13.336-38.331-56.901-37.934z m142.256-253.55H383.511c-172.849 0-312.967 140.12-312.967 312.967 0 112.509 59.367 211.151 148.483 266.31 38.117 23.594 22.226 179.433 22.226 179.433s186.946-132.776 199.159-132.776h227.613c172.849 0 312.967-140.12 312.967-312.967S840.874 150.051 668.025 150.051z\"><\/path>\n          <\/svg>\n        <\/div>\n        <div class=\"forloeb-card-notice__text\">L\u00e6s + komment\u00e9r her<\/div>\n      <\/div>\n\n      <div class=\"forloeb-card-info\">\n        <h3>Deliver<\/h3>\n        <p>Her samler jeg afpr\u00f8vningen af prototyperne, feedbacken og den retning designet peger mod.<\/p>\n      <\/div>\n    <\/a>\n\n    <a class=\"forloeb-card forloeb-card--active forloeb-card--reflect\" href=\"https:\/\/itdd.au.dk\/single-user-mode\/reflect\/\" data-image=\"https:\/\/images.unsplash.com\/photo-1499209974431-9dddcece7f88?auto=format&#038;fit=crop&#038;w=1200&#038;q=80\">\n      <div class=\"forloeb-card-bg\"><\/div>\n      <div class=\"reflect-ring\" aria-hidden=\"true\">\u21ba<\/div>\n      <div class=\"forloeb-card-info\">\n        <h3>Reflect<\/h3>\n        <p>Her ser jeg tilbage p\u00e5 processen, valgene, tvivlen og det, jeg tager med videre.<\/p>\n      <\/div>\n    <\/a>\n\n    <a class=\"forloeb-card forloeb-card--active forloeb-card--infoboard\" href=\"https:\/\/itdd.au.dk\/single-user-mode\/infoboard\/\" data-image=\"https:\/\/itdd.au.dk\/single-user-mode\/wp-content\/uploads\/sites\/103\/2026\/05\/Unavngivet-6.jpeg\">\n      <div class=\"forloeb-card-bg\"><\/div>\n      <div class=\"infoboard-dots\" aria-hidden=\"true\">\n        <span><\/span><span><\/span><span><\/span>\n      <\/div>\n      <div class=\"forloeb-card-info\">\n        <h3>Infoboard<\/h3>\n        <p>Mit visuelle board med overblik over Discover, Define, Develop og den aktuelle prototypefase.<\/p>\n      <\/div>\n    <\/a>\n\n    <a class=\"forloeb-card forloeb-card--active forloeb-card--outline\" href=\"https:\/\/karina.getoutline.com\/s\/06b7b21b-5a9d-4390-a152-5f05672b8869\" target=\"_blank\" rel=\"noopener noreferrer\" data-image=\"https:\/\/itdd.au.dk\/single-user-mode\/wp-content\/uploads\/sites\/103\/2026\/05\/Unavngivet-5-2.jpeg\">\n      <div class=\"forloeb-card-bg\"><\/div>\n      <div class=\"outline-badge\" aria-hidden=\"true\">Outline<\/div>\n      <div class=\"forloeb-card-info\">\n        <h3>Min opgave<\/h3>\n        <p>Selve opgavedokumentet i Outline, hvor projektet bliver samlet og skrevet frem.<\/p>\n      <\/div>\n    <\/a>\n\n  <\/div>\n<\/section>\n\n<style>\n  .mine-forloeb {\n    --accent: #f0443e;\n    --accent-soft: rgba(240, 68, 62, 0.14);\n    --accent-mid: rgba(240, 68, 62, 0.34);\n\n    --line-soft: rgba(255,255,255,0.10);\n    --line-mid: rgba(255,255,255,0.18);\n    --white-soft: rgba(255,255,255,0.70);\n\n    background: #000;\n    color: #fff;\n    padding: 64px 24px;\n    font-family: \"Helvetica Neue\", Arial, sans-serif;\n  }\n\n  .mine-forloeb-title {\n    margin: 0 0 8px;\n    text-align: center;\n    font-size: clamp(2rem, 4vw, 3rem);\n    font-weight: 750;\n    letter-spacing: -0.04em;\n    color: #fff;\n  }\n\n  .mine-forloeb-title::after {\n    content: \"\";\n    display: block;\n    width: 88px;\n    height: 1px;\n    margin: 18px auto 0;\n    background: rgba(255,255,255,0.36);\n    box-shadow: none;\n    transition: background 0.25s ease, box-shadow 0.25s ease;\n  }\n\n  .mine-forloeb:hover .mine-forloeb-title::after {\n    background: var(--accent);\n    box-shadow: 0 0 16px var(--accent-soft);\n  }\n\n  .mine-forloeb-subtitle {\n    margin: 0 auto 34px;\n    max-width: 620px;\n    text-align: center;\n    font-size: clamp(0.95rem, 1.5vw, 1.08rem);\n    line-height: 1.55;\n    color: rgba(255,255,255,0.58);\n  }\n\n  .mine-forloeb-grid {\n    max-width: 1320px;\n    margin: 0 auto;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    gap: 22px;\n  }\n\n  .forloeb-card {\n    position: relative;\n    width: 280px;\n    height: 360px;\n    border-radius: 18px;\n    overflow: hidden;\n    isolation: isolate;\n    -webkit-mask-image: -webkit-radial-gradient(white, black);\n    background: #101010;\n    transform-style: preserve-3d;\n    transform: perspective(900px) rotateX(0deg) rotateY(0deg);\n    transition:\n      transform 0.18s ease,\n      box-shadow 0.35s ease,\n      border-color 0.35s ease,\n      background 0.35s ease;\n    box-shadow:\n      0 22px 46px rgba(0, 0, 0, 0.45),\n      inset 0 0 0 1px var(--line-soft);\n    text-decoration: none;\n    color: inherit;\n    backface-visibility: hidden;\n    -webkit-backface-visibility: hidden;\n    will-change: transform;\n  }\n\n  .forloeb-card::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: 3;\n    border-radius: inherit;\n    border: 1px solid var(--line-mid);\n    pointer-events: none;\n    opacity: 0.72;\n    transition: border-color 0.35s ease, opacity 0.35s ease;\n  }\n\n  .forloeb-card-bg {\n    position: absolute;\n    inset: -20px;\n    border-radius: inherit;\n    background-size: cover;\n    background-position: center;\n    opacity: 0.26;\n    transition:\n      transform 0.18s ease,\n      opacity 0.35s ease,\n      filter 0.35s ease;\n    filter: grayscale(100%) saturate(0) contrast(1.08) brightness(0.82);\n    backface-visibility: hidden;\n    -webkit-backface-visibility: hidden;\n    will-change: transform;\n  }\n\n  .forloeb-card::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    border-radius: inherit;\n    background:\n      radial-gradient(circle at 20% 16%, rgba(255,255,255,0.07), transparent 28%),\n      linear-gradient(\n        to top,\n        rgba(0,0,0,0.96) 10%,\n        rgba(0,0,0,0.68) 55%,\n        rgba(255,255,255,0.035) 100%\n      );\n    pointer-events: none;\n    transition: background 0.35s ease;\n  }\n\n  .forloeb-card-info {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 4;\n    border-radius: inherit;\n    padding: 24px 22px 22px;\n    min-height: 148px;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    transform: translateY(0);\n    backface-visibility: hidden;\n    -webkit-backface-visibility: hidden;\n  }\n\n  .forloeb-card-info h3 {\n    margin: 0 0 10px;\n    font-size: 2rem;\n    line-height: 1;\n    font-weight: 650;\n    letter-spacing: -0.035em;\n    color: #fff;\n  }\n\n  .forloeb-card-info h3::before {\n    content: \"\";\n    display: block;\n    width: 34px;\n    height: 1px;\n    margin-bottom: 12px;\n    background: rgba(255,255,255,0.44);\n    box-shadow: none;\n    transition:\n      background 0.25s ease,\n      box-shadow 0.25s ease,\n      width 0.25s ease;\n  }\n\n  .forloeb-card-info p {\n    margin: 0;\n    font-size: 0.98rem;\n    line-height: 1.65;\n    color: rgba(255,255,255,0.88);\n    opacity: 0;\n    max-height: 0;\n    overflow: hidden;\n    transition: opacity 0.3s ease, max-height 0.35s ease;\n  }\n\n  .forloeb-card--active {\n    cursor: pointer;\n  }\n\n  .forloeb-card--active:hover {\n    background: #141414;\n    box-shadow:\n      0 34px 70px rgba(0, 0, 0, 0.62),\n      0 0 0 1px var(--accent-mid),\n      0 0 34px var(--accent-soft),\n      inset 0 0 0 1px rgba(255,255,255,0.08);\n  }\n\n  .forloeb-card--active:hover::before {\n    border-color: var(--accent-mid);\n    opacity: 1;\n  }\n\n  .forloeb-card--active:hover::after {\n    background:\n      radial-gradient(circle at 20% 16%, var(--accent-soft), transparent 30%),\n      linear-gradient(\n        to top,\n        rgba(0,0,0,0.94) 10%,\n        rgba(0,0,0,0.58) 55%,\n        rgba(240,68,62,0.12) 100%\n      );\n  }\n\n  .forloeb-card--active:hover .forloeb-card-info h3::before {\n    width: 44px;\n    background: var(--accent);\n    box-shadow: 0 0 12px var(--accent-soft);\n  }\n\n  .forloeb-card--active:hover .forloeb-card-info p {\n    opacity: 1;\n    max-height: 170px;\n  }\n\n  .forloeb-card--active:hover .forloeb-card-bg {\n    opacity: 0.68;\n    filter: grayscale(20%) saturate(0.9) contrast(1.08) brightness(0.92);\n  }\n\n  .forloeb-card-notice {\n    position: absolute;\n    top: 18px;\n    left: 50%;\n    z-index: 5;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 14px;\n    border-radius: 999px;\n    background: rgba(10,10,10,0.78);\n    border: 1px solid rgba(255,255,255,0.18);\n    backdrop-filter: blur(10px);\n    box-shadow:\n      0 14px 30px rgba(0,0,0,0.32);\n    transform: translateX(-50%) translateY(-8px) scale(0.96);\n    opacity: 0;\n    pointer-events: none;\n    transition:\n      opacity 0.35s ease,\n      transform 0.35s ease,\n      border-color 0.25s ease,\n      box-shadow 0.25s ease;\n    white-space: nowrap;\n    backface-visibility: hidden;\n    -webkit-backface-visibility: hidden;\n  }\n\n  .forloeb-card--deliver:hover .forloeb-card-notice {\n    border-color: var(--accent-mid);\n    box-shadow:\n      0 14px 30px rgba(0,0,0,0.32),\n      0 0 18px var(--accent-soft);\n  }\n\n  .forloeb-card-notice.is-visible {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0) scale(1);\n  }\n\n  .forloeb-card-notice__icon {\n    width: 40px;\n    height: 40px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 50%;\n    background: rgba(255,255,255,0.08);\n    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);\n    flex: 0 0 auto;\n    transition: background 0.25s ease, box-shadow 0.25s ease;\n  }\n\n  .forloeb-card--deliver:hover .forloeb-card-notice__icon {\n    background: rgba(240,68,62,0.10);\n    box-shadow: inset 0 0 0 1px var(--accent-soft);\n  }\n\n  .forloeb-card-notice__svg {\n    width: 24px;\n    height: 24px;\n    display: block;\n    fill: rgba(255,255,255,0.82);\n    filter: none;\n    animation: forloebCommentPulse 2.6s ease-in-out infinite;\n    transition: fill 0.25s ease, filter 0.25s ease;\n  }\n\n  .forloeb-card--deliver:hover .forloeb-card-notice__svg {\n    fill: var(--accent);\n    filter: drop-shadow(0 2px 8px var(--accent-soft));\n  }\n\n  .forloeb-card-notice__text {\n    font-size: 0.95rem;\n    line-height: 1.2;\n    font-weight: 650;\n    color: #fff;\n    letter-spacing: -0.01em;\n  }\n\n  .reflect-ring {\n    position: absolute;\n    top: 22px;\n    right: 22px;\n    z-index: 5;\n    width: 58px;\n    height: 58px;\n    border-radius: 50%;\n    display: grid;\n    place-items: center;\n    border: 1px solid rgba(255,255,255,0.18);\n    background: rgba(0,0,0,0.34);\n    backdrop-filter: blur(8px);\n    color: rgba(255,255,255,0.86);\n    font-size: 2rem;\n    font-weight: 300;\n    box-shadow:\n      0 14px 32px rgba(0,0,0,0.32),\n      inset 0 0 0 1px rgba(255,255,255,0.05);\n    transition:\n      transform 0.45s ease,\n      border-color 0.25s ease,\n      color 0.25s ease,\n      box-shadow 0.25s ease;\n  }\n\n  .forloeb-card--reflect:hover .reflect-ring {\n    transform: rotate(-180deg) scale(1.05);\n    border-color: var(--accent-mid);\n    color: #fff;\n    box-shadow:\n      0 14px 32px rgba(0,0,0,0.32),\n      0 0 18px var(--accent-soft),\n      inset 0 0 0 1px rgba(255,255,255,0.06);\n  }\n\n  .infoboard-dots {\n    position: absolute;\n    top: 24px;\n    left: 22px;\n    z-index: 5;\n    display: flex;\n    gap: 8px;\n  }\n\n  .infoboard-dots span {\n    width: 13px;\n    height: 13px;\n    border-radius: 50%;\n    background: rgba(255,255,255,0.78);\n    box-shadow: none;\n    transition: background 0.25s ease, box-shadow 0.25s ease;\n  }\n\n  .infoboard-dots span:nth-child(2) {\n    background: rgba(255,255,255,0.52);\n  }\n\n  .infoboard-dots span:nth-child(3) {\n    background: rgba(255,255,255,0.28);\n  }\n\n  .forloeb-card--infoboard:hover .infoboard-dots span:first-child {\n    background: var(--accent);\n    box-shadow: 0 0 18px var(--accent-soft);\n  }\n\n  .outline-badge {\n    position: absolute;\n    top: 24px;\n    right: 20px;\n    z-index: 5;\n    padding: 8px 13px;\n    border-radius: 999px;\n    background: rgba(0,0,0,0.72);\n    border: 1px solid rgba(255,255,255,0.18);\n    color: rgba(255,255,255,0.92);\n    font-size: 0.74rem;\n    font-weight: 800;\n    letter-spacing: 0.04em;\n    text-transform: uppercase;\n    box-shadow: 0 12px 26px rgba(0,0,0,0.28);\n    transition:\n      border-color 0.25s ease,\n      color 0.25s ease,\n      box-shadow 0.25s ease;\n  }\n\n  .forloeb-card--outline:hover .outline-badge {\n    border-color: var(--accent-mid);\n    color: #fff;\n    box-shadow:\n      0 12px 26px rgba(0,0,0,0.28),\n      0 0 18px var(--accent-soft);\n  }\n\n  @keyframes forloebCommentPulse {\n    0% {\n      transform: scale(1) rotate(0deg);\n    }\n    50% {\n      transform: scale(1.06) rotate(-4deg);\n    }\n    100% {\n      transform: scale(1) rotate(0deg);\n    }\n  }\n\n  @media (max-width: 700px) {\n    .mine-forloeb {\n      padding: 48px 16px;\n    }\n\n    .forloeb-card {\n      width: 100%;\n      max-width: 360px;\n      height: 340px;\n      transform: perspective(900px) rotateX(0deg) rotateY(0deg) !important;\n    }\n\n    .forloeb-card-info {\n      min-height: auto;\n    }\n\n    .forloeb-card-info p {\n      opacity: 1;\n      max-height: none;\n      overflow: visible;\n    }\n\n    .forloeb-card-bg {\n      transform: translate(0, 0) scale(1) !important;\n    }\n\n    .forloeb-card-notice {\n      top: 14px;\n      padding: 8px 12px;\n      gap: 8px;\n    }\n\n    .forloeb-card-notice__icon {\n      width: 34px;\n      height: 34px;\n    }\n\n    .forloeb-card-notice__svg {\n      width: 20px;\n      height: 20px;\n    }\n\n    .forloeb-card-notice__text {\n      font-size: 0.82rem;\n    }\n\n    .reflect-ring {\n      width: 48px;\n      height: 48px;\n      font-size: 1.7rem;\n    }\n  }\n<\/style>\n\n<script>\n  (function () {\n    const allCards = document.querySelectorAll(\".forloeb-card\");\n\n    allCards.forEach((card) => {\n      const bg = card.querySelector(\".forloeb-card-bg\");\n      const image = card.getAttribute(\"data-image\");\n\n      if (bg && image) {\n        bg.style.backgroundImage = \"url('\" + image + \"')\";\n      }\n    });\n\n    allCards.forEach((card) => {\n      const bg = card.querySelector(\".forloeb-card-bg\");\n\n      card.addEventListener(\"mousemove\", (e) => {\n        if (window.innerWidth <= 700) return;\n\n        const rect = card.getBoundingClientRect();\n        const x = e.clientX - rect.left;\n        const y = e.clientY - rect.top;\n\n        const centerX = rect.width \/ 2;\n        const centerY = rect.height \/ 2;\n\n        const rotateX = ((y - centerY) \/ centerY) * -8;\n        const rotateY = ((x - centerX) \/ centerX) * 8;\n\n        card.style.transform =\n          \"perspective(900px) rotateX(\" + rotateX + \"deg) rotateY(\" + rotateY + \"deg)\";\n\n        if (bg) {\n          const moveX = ((x - centerX) \/ centerX) * -12;\n          const moveY = ((y - centerY) \/ centerY) * -12;\n          bg.style.transform =\n            \"translate(\" + moveX + \"px, \" + moveY + \"px) scale(1.06)\";\n        }\n      });\n\n      card.addEventListener(\"mouseleave\", () => {\n        if (window.innerWidth <= 700) return;\n\n        card.style.transform =\n          \"perspective(900px) rotateX(0deg) rotateY(0deg)\";\n\n        if (bg) {\n          bg.style.transform = \"translate(0, 0) scale(1)\";\n        }\n      });\n    });\n\n    const noticeCard = document.querySelector(\".forloeb-card--deliver\");\n    const notice = noticeCard ? noticeCard.querySelector(\".forloeb-card-notice\") : null;\n\n    if (!noticeCard || !notice || !(\"IntersectionObserver\" in window)) return;\n\n    let hideTimer = null;\n    let hasShownInCurrentView = false;\n\n    function showNotice() {\n      clearTimeout(hideTimer);\n      notice.classList.add(\"is-visible\");\n      hideTimer = setTimeout(() => {\n        notice.classList.remove(\"is-visible\");\n      }, 3200);\n    }\n\n    const observer = new IntersectionObserver((entries) => {\n      entries.forEach((entry) => {\n        if (entry.isIntersecting) {\n          if (!hasShownInCurrentView) {\n            hasShownInCurrentView = true;\n            showNotice();\n          }\n        } else {\n          clearTimeout(hideTimer);\n          notice.classList.remove(\"is-visible\");\n          hasShownInCurrentView = false;\n        }\n      });\n    }, {\n      threshold: 0.55\n    });\n\n    observer.observe(noticeCard);\n  })();\n<\/script>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>It-Didaktisk Design Designmodulet Single User Mode er mit designrum \u2014 et sted for id\u00e9er, fors\u00f8g og refleksioner. Jeg arbejder alene, men l\u00e6ring bliver til i samspillet mellem egne tanker, andres perspektiver og det f\u00e6lles faglige rum. Her er jeg \u00d7 HEY! OM MIG design l\u00e6ring f\u00e6llesskab proces Single User Mode Om mig YES! Jeg hedder [&hellip;]<\/p>\n","protected":false},"author":85,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/comments?post=11"}],"version-history":[{"count":108,"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":1233,"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/pages\/11\/revisions\/1233"}],"wp:attachment":[{"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/media?parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}