{"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-21T16:23:15","modified_gmt":"2026-05-21T16:23:15","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-1 is-layout-flex wp-container-core-columns-is-layout-794e3cfa 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-794e3cfa 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 wp-block-paragraph\"><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=\"sum-discover-link\" href=\"https:\/\/itdd.au.dk\/single-user-mode\/discover\/\" aria-label=\"G\u00e5 til Discover\">\n  <div class=\"sum-discover-scene\">\n    <span class=\"sum-discover-label\">Discover<\/span>\n\n    <span class=\"sum-discover-eyes-wrap\">\n      <span class=\"sum-discover-eye\">\n        <span class=\"sum-discover-pupil\"><\/span>\n      <\/span>\n      <span class=\"sum-discover-eye\">\n        <span class=\"sum-discover-pupil\"><\/span>\n      <\/span>\n    <\/span>\n  <\/div>\n<\/a>\n\n<style>\n.sum-discover-link {\n  display: block;\n  width: 100%;\n  text-decoration: none;\n}\n\n.sum-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: sumDiscoverZoom 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.sum-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.sum-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: sumFlashlight 7000ms forwards;\n  mix-blend-mode: screen;\n}\n\n.sum-discover-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: sumEyesAppear 7000ms forwards;\n  pointer-events: none;\n}\n\n.sum-discover-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: sumBlink 3.2s infinite 7s;\n}\n\n.sum-discover-eye:first-child {\n  left: 0;\n}\n\n.sum-discover-eye:last-child {\n  right: 0;\n}\n\n.sum-discover-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.sum-discover-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: sumDiscoverText 7000ms forwards;\n  pointer-events: none;\n}\n\n.sum-discover-link:focus-visible {\n  outline: none;\n}\n\n.sum-discover-link:focus-visible .sum-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 sumFlashlight {\n  0%, 9% {\n    opacity: 0;\n    clip-path: circle(150px at 45% 10%);\n  }\n\n  10%, 15%, 85% {\n    opacity: 1;\n  }\n\n  50% {\n    clip-path: circle(150px at 60% 20%);\n  }\n\n  54%, 100% {\n    opacity: 1;\n    clip-path: circle(150px at 55% 92%);\n  }\n}\n\n@keyframes sumDiscoverZoom {\n  0%, 48% {\n    transform: scale(1);\n    filter: saturate(1.02) hue-rotate(-3deg);\n  }\n\n  58% {\n    transform: scale(1.08) translateY(0);\n    filter: saturate(1.08) hue-rotate(-5deg);\n  }\n\n  70% {\n    transform: scale(1.18) translateY(6px);\n    filter: saturate(1.14) hue-rotate(-6deg);\n  }\n\n  84%, 100% {\n    transform: scale(1.18) translateY(6px);\n    filter: saturate(1.14) hue-rotate(-6deg);\n  }\n}\n\n@keyframes sumDiscoverText {\n  0%, 56% {\n    opacity: 0;\n    transform: translateY(10px) scale(0.94);\n  }\n\n  64%, 100% {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n@keyframes sumEyesAppear {\n  0%, 52% {\n    opacity: 0;\n  }\n\n  53%, 100% {\n    opacity: 1;\n  }\n}\n\n@keyframes sumBlink {\n  0%, 92%, 100% {\n    transform: scaleY(1);\n    opacity: 1;\n  }\n\n  94%, 98% {\n    transform: scaleY(0.08);\n    opacity: 0.95;\n  }\n}\n\n@media (max-width: 781px) {\n  .sum-discover-link {\n    width: 100%;\n  }\n\n  .sum-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  .sum-discover-scene::before {\n    background-size: 320px 145px;\n    background-position: center bottom;\n    clip-path: circle(170px at center center);\n  }\n\n  .sum-discover-eyes-wrap {\n    left: calc(50% + 54px);\n    bottom: 92px;\n    width: 24px;\n    height: 10px;\n  }\n\n  .sum-discover-eye {\n    width: 9px;\n    height: 9px;\n  }\n\n  .sum-discover-pupil {\n    width: 3px;\n    height: 3px;\n  }\n\n  .sum-discover-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  .sum-discover-scene {\n    height: 66svh;\n    min-height: 400px;\n    background-size: 340px 150px;\n  }\n\n  .sum-discover-scene::before {\n    background-size: 340px 150px;\n    clip-path: circle(180px at center center);\n  }\n\n  .sum-discover-eyes-wrap {\n    left: calc(50% + 50px);\n    bottom: 96px;\n  }\n\n  .sum-discover-label {\n    left: calc(50% + 32px);\n    bottom: 60px;\n  }\n}\n<\/style>\n\n<script>\n(function () {\n  document.querySelectorAll(\".sum-discover-scene\").forEach(function (scene) {\n    const eyesWrap = scene.querySelector(\".sum-discover-eyes-wrap\");\n    if (!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\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})();\n<\/script>\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  \/* Remove every old Discover block *\/\n  document.querySelectorAll(\".discover-scene-link\").forEach(function (el) {\n    el.remove();\n  });\n\n  \/* If the new fixed block was pasted more than once, keep only the first *\/\n  var fixedBlocks = document.querySelectorAll(\".sum-discover-link\");\n  fixedBlocks.forEach(function (el, index) {\n    if (index > 0) {\n      el.remove();\n    }\n  });\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-794e3cfa 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.documentElement.classList.remove(\"sum-lightmode\");\n        document.body.classList.remove(\"sum-lightmode\");\n\n        try {\n          localStorage.setItem(\"sumThemeMode\", \"dark\");\n        } catch (error) {}\n\n        const themeBtn = document.getElementById(\"sumThemeToggle\");\n        if (themeBtn) themeBtn.style.display = \"none\";\n\n        const themeLabel = document.getElementById(\"sumThemeLabel\");\n        if (themeLabel) themeLabel.textContent = \"Lys\";\n\n        const 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\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      <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: #d85a52;\n    --accent-soft: rgba(216, 90, 82, 0.10);\n    --accent-mid: rgba(216, 90, 82, 0.22);\n\n    --surface: #000;\n    --surface-card: #101010;\n    --surface-card-hover: #141414;\n\n    --line-soft: rgba(255,255,255,0.10);\n    --line-mid: rgba(255,255,255,0.17);\n    --line-hover: rgba(216, 90, 82, 0.24);\n\n    --text: #fff;\n    --text-muted: rgba(255,255,255,0.58);\n    --text-soft: rgba(255,255,255,0.88);\n\n    background: var(--surface);\n    color: var(--text);\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: var(--text);\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.30);\n    transition: background 0.25s ease, box-shadow 0.25s ease;\n  }\n\n  .mine-forloeb:hover .mine-forloeb-title::after {\n    background: var(--line-hover);\n    box-shadow: 0 0 10px 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: var(--text-muted);\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: var(--surface-card);\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      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    filter: grayscale(100%) saturate(0) contrast(1.08) brightness(0.82);\n    transition:\n      transform 0.18s ease,\n      opacity 0.35s ease,\n      filter 0.35s ease;\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: var(--text);\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.38);\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: var(--text-soft);\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: var(--surface-card-hover);\n    box-shadow:\n      0 34px 70px rgba(0, 0, 0, 0.62),\n      0 0 0 1px var(--accent-mid),\n      0 0 24px 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(--line-hover);\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(216,90,82,0.08) 100%\n      );\n  }\n\n  .forloeb-card--active:hover .forloeb-card-info h3::before {\n    width: 44px;\n    background: var(--line-hover);\n    box-shadow: 0 0 8px 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  .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(--line-hover);\n    color: #fff;\n    box-shadow:\n      0 14px 32px rgba(0,0,0,0.32),\n      0 0 14px 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    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(--line-hover);\n    box-shadow: 0 0 12px 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(--line-hover);\n    color: #fff;\n    box-shadow:\n      0 12px 26px rgba(0,0,0,0.28),\n      0 0 14px var(--accent-soft);\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    .reflect-ring {\n      width: 48px;\n      height: 48px;\n      font-size: 1.7rem;\n    }\n  }\n<\/style>\n\n<script>\n  (function () {\n    function initForloebCards() {\n      const cards = document.querySelectorAll(\".forloeb-card\");\n\n      cards.forEach(function (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      cards.forEach(function (card) {\n        const bg = card.querySelector(\".forloeb-card-bg\");\n\n        card.addEventListener(\"mousemove\", function (event) {\n          if (window.innerWidth <= 700) return;\n\n          const rect = card.getBoundingClientRect();\n          const x = event.clientX - rect.left;\n          const y = event.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\n            bg.style.transform =\n              \"translate(\" + moveX + \"px, \" + moveY + \"px) scale(1.06)\";\n          }\n        });\n\n        card.addEventListener(\"mouseleave\", function () {\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\n    if (document.readyState === \"loading\") {\n      document.addEventListener(\"DOMContentLoaded\", initForloebCards);\n    } else {\n      initForloebCards();\n    }\n  })();\n<\/script>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>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 design l\u00e6ring f\u00e6llesskab proces Single User Mode Om mig Jeg hedder Karina Toftegaard og l\u00e6ser it-didaktisk design. Ved siden [&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":114,"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":1530,"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/pages\/11\/revisions\/1530"}],"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}]}}