{"id":81,"date":"2026-03-13T17:58:40","date_gmt":"2026-03-13T17:58:40","guid":{"rendered":"https:\/\/itdd.au.dk\/single-user-mode\/?page_id=81"},"modified":"2026-04-14T09:45:43","modified_gmt":"2026-04-14T09:45:43","slug":"discover","status":"publish","type":"page","link":"https:\/\/itdd.au.dk\/single-user-mode\/discover\/","title":{"rendered":"Discover"},"content":{"rendered":"\n<div class=\"wp-block-columns alignwide 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:66.66%\">\n<div class=\"wp-block-columns alignfull is-style-default 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\"><div class=\"wp-block-post-date\"><time datetime=\"2026-03-22T09:27:04.912Z\">marts 22, 2026<\/time><\/div>\n\n\n<h2 class=\"wp-block-heading\">Discover \/ Empathize<\/h2>\n\n\n\n<p>P\u00e5 denne side har jeg samlet mit arbejde i Discover-fasen i designprocessen. Her unders\u00f8ger jeg det dom\u00e6ne, projektet tager afs\u00e6t i, og arbejder med at opbygge en mere nuanceret forst\u00e5else af den praksis, jeg senere skal arbejde videre med.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Projektets fokus<\/h2>\n\n\n\n<p>Mit projekt tager udgangspunkt i kundeoplevelsen i <strong>\u00c1 handil \u00ed Vestmanna<\/strong> med s\u00e6rligt fokus p\u00e5 atmosf\u00e6re, lokalitet og m\u00f8det med turister og andre kunder udefra. Undervejs har projektet bev\u00e6get sig fra et bredere fokus p\u00e5 location-based teknologi og kundeoplevelse til en mere pr\u00e6cis interesse for indgangen som et centralt sted for ankomst, orientering, f\u00f8rste indtryk og social kontakt.<\/p>\n\n\n\n<p>Jeg er is\u00e6r optaget af, hvordan butikkens kvaliteter bliver til i samspillet mellem mennesker, varer, rum, rutiner, service og lokal stemning. Samtidig unders\u00f8ger jeg, hvordan disse kvaliteter opleves af kunder, som ikke p\u00e5 forh\u00e5nd kender butikkens rytmer, koder og rumlige logik.<\/p>\n\n\n\n<p>Valget af \u00c1 handil som case h\u00e6nger ogs\u00e5 sammen med, at jeg gerne ville arbejde med en mindre og mere afgr\u00e6nset designkontekst end dem, jeg normalt besk\u00e6ftiger mig med. P\u00e5 den m\u00e5de er projektet ogs\u00e5 blevet en \u00f8velse i at arbejde mere unders\u00f8gende med selve designprocessen og med, hvordan sm\u00e5 og stedssvarende greb kan udvikles p\u00e5 baggrund af konkrete fund.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Hvad du finder p\u00e5 siden<\/h2>\n\n\n\n<p>Siden samler mit arbejde med empiri, litteratur og forel\u00f8bige refleksioner fra Discover-fasen. Her finder du ogs\u00e5 link til opgaven, vores f\u00e6lles Miro-board samt et personligt HTML-board, hvor jeg l\u00f8bende samler projektets centrale spor, fund, sp\u00e6ndinger og overvejelser.<\/p>\n\n\n\n<p>Boardet indeholder blandt andet:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>to do<\/li>\n\n\n\n<li>projekt og afgr\u00e6nsning<\/li>\n\n\n\n<li>empiri og datagrundlag<\/li>\n\n\n\n<li>fund og indsigter<\/li>\n\n\n\n<li>sp\u00e6ndinger og problemfelt<\/li>\n\n\n\n<li>litteratur og teori<\/li>\n\n\n\n<li>n\u00e6ste skridt \/ Define<\/li>\n<\/ul>\n\n\n\n<div style=\"height:36px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Caveat:wght@600;700&#038;family=Patrick+Hand&#038;display=swap\" rel=\"stylesheet\">\n\n<style>\n  .postit-wrap {\n    padding: 0 28px;\n  }\n\n  .postit-row {\n    display: flex;\n    gap: 22px;\n    align-items: flex-start;\n    flex-wrap: wrap;\n  }\n\n  .floating-postit {\n    position: relative;\n    display: inline-block;\n    width: 118px;\n    min-height: 138px;\n    padding: 18px 14px 14px;\n    border: 0;\n    border-radius: 2px;\n    text-align: left;\n    text-decoration: none;\n    cursor: pointer;\n    color: #111;\n    box-shadow:\n      0 10px 14px rgba(0,0,0,0.17),\n      5px 7px 10px rgba(0,0,0,0.09);\n    transition: transform 0.18s ease, box-shadow 0.18s ease;\n    overflow: visible;\n    background: none;\n    font: inherit;\n  }\n\n  .floating-postit:hover {\n    transform: translateY(-2px);\n    box-shadow:\n      0 14px 18px rgba(0,0,0,0.19),\n      7px 10px 12px rgba(0,0,0,0.11);\n  }\n\n  .floating-postit.note-yellow {\n    background:\n      linear-gradient(182deg, #f7e45d 0%, #efd429 100%);\n  }\n\n  .floating-postit.note-red {\n    background:\n      linear-gradient(179deg, #ff5a45 0%, #f83824 100%);\n  }\n\n  .floating-postit.note-orange {\n    background:\n      linear-gradient(181deg, #ffab46 0%, #f58a11 100%);\n  }\n\n  .floating-postit.note-blue {\n    background:\n      linear-gradient(181deg, #74c7ff 0%, #2f97f5 100%);\n  }\n\n  .floating-postit::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background:\n      linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.02) 28%, rgba(0,0,0,0.03) 100%),\n      radial-gradient(circle at 18% 24%, rgba(255,255,255,0.10) 0, transparent 18%),\n      radial-gradient(circle at 78% 70%, rgba(0,0,0,0.04) 0, transparent 20%);\n    pointer-events: none;\n    opacity: 0.8;\n  }\n\n  .floating-postit::before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    right: 13px;\n    width: 24px;\n    height: 21px;\n    background: linear-gradient(135deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.12) 70%);\n    clip-path: polygon(0 0, 100% 0, 100% 100%);\n    opacity: 0.88;\n  }\n\n  .floating-postit:nth-child(1) {\n    transform: rotate(-1.4deg);\n  }\n\n  .floating-postit:nth-child(2) {\n    transform: rotate(1.2deg);\n  }\n\n  .floating-postit:nth-child(3) {\n    transform: rotate(-0.8deg);\n  }\n\n  .floating-postit:nth-child(4) {\n    transform: rotate(1deg);\n  }\n\n  .floating-postit:nth-child(1):hover,\n  .floating-postit:nth-child(2):hover,\n  .floating-postit:nth-child(3):hover,\n  .floating-postit:nth-child(4):hover {\n    transform: translateY(-2px) rotate(0deg);\n  }\n\n  .floating-postit .pin {\n    position: absolute;\n    top: -8px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 14px;\n    height: 14px;\n    border-radius: 50%;\n    background: radial-gradient(circle at 35% 35%, #ff8d8d 0%, #cf1010 58%, #850000 100%);\n    box-shadow:\n      0 2px 2px rgba(0,0,0,0.22),\n      inset -1px -2px 2px rgba(0,0,0,0.24);\n    z-index: 3;\n  }\n\n  .floating-postit .pin::after {\n    content: \"\";\n    position: absolute;\n    top: 11px;\n    left: 6px;\n    width: 2px;\n    height: 18px;\n    background: linear-gradient(180deg, rgba(75,75,75,0.9), rgba(170,170,170,0.4));\n    transform: rotate(31deg);\n    transform-origin: top center;\n    border-radius: 2px;\n    z-index: -1;\n  }\n\n  .floating-postit strong {\n    display: block;\n    margin-top: 10px;\n    margin-bottom: 8px;\n    font-family: \"Caveat\", cursive;\n    font-size: 1.35rem;\n    line-height: 0.95;\n    font-weight: 700;\n    color: #111;\n    position: relative;\n    z-index: 1;\n  }\n\n  .floating-postit span.text {\n    display: block;\n    font-family: \"Patrick Hand\", cursive;\n    font-size: 1rem;\n    line-height: 1.15;\n    color: #111;\n    position: relative;\n    z-index: 1;\n  }\n\n  .focus-modal {\n    position: fixed;\n    inset: 0;\n    z-index: 10000;\n    display: none;\n    background: rgba(24, 18, 13, 0.82);\n    backdrop-filter: blur(3px);\n  }\n\n  .focus-modal.active {\n    display: block;\n  }\n\n  .focus-controls {\n    position: absolute;\n    top: 14px;\n    right: 14px;\n    z-index: 10001;\n    display: flex;\n    gap: 10px;\n  }\n\n  .focus-btn {\n    width: 44px;\n    height: 44px;\n    border: 0;\n    border-radius: 999px;\n    background: rgba(47, 42, 37, 0.9);\n    color: #fff;\n    font-size: 1.1rem;\n    line-height: 1;\n    cursor: pointer;\n    box-shadow: 0 6px 14px rgba(0,0,0,0.18);\n  }\n\n  .focus-btn:hover {\n    background: #000;\n  }\n\n  .focus-panel-wrap {\n    position: absolute;\n    inset: 0;\n    overflow: auto;\n    padding: 72px 24px 24px;\n    background: #f6f1e8;\n  }\n\n  .focus-panel {\n    max-width: 980px;\n    margin: 0 auto;\n  }\n\n  .focus-title {\n    margin: 0 0 20px;\n    font-family: \"Caveat\", cursive;\n    font-size: clamp(2.2rem, 4vw, 3.2rem);\n    line-height: 0.95;\n    color: #24180f;\n  }\n\n  .focus-intro {\n    display: inline-block;\n    margin: 0 0 24px;\n    padding: 14px 16px;\n    background: #fff6a8;\n    color: #111;\n    box-shadow: 0 8px 14px rgba(0,0,0,0.16);\n    font-family: \"Patrick Hand\", cursive;\n    font-size: 1.05rem;\n    line-height: 1.35;\n    max-width: 760px;\n    transform: rotate(-0.4deg);\n  }\n\n  .focus-notes {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 18px;\n    align-items: flex-start;\n  }\n\n  .focus-note {\n    width: 190px;\n    min-height: 150px;\n    padding: 16px 14px;\n    box-shadow: 0 10px 14px rgba(0,0,0,0.16);\n    color: #111;\n    transform: rotate(-1deg);\n    position: relative;\n  }\n\n  .focus-note::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background:\n      linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.03) 100%);\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .focus-note:nth-child(even) {\n    transform: rotate(1deg);\n  }\n\n  .focus-note.yellow {\n    background: #f7de3a;\n  }\n\n  .focus-note.red {\n    background: #ff5542;\n  }\n\n  .focus-note.orange {\n    background: #ff9a2f;\n  }\n\n  .focus-note.pink {\n    background: #ff62d8;\n  }\n\n  .focus-note h3 {\n    margin: 0 0 8px;\n    font-family: \"Caveat\", cursive;\n    font-size: 1.45rem;\n    line-height: 0.95;\n    position: relative;\n    z-index: 1;\n  }\n\n  .focus-note p {\n    margin: 0;\n    font-family: \"Patrick Hand\", cursive;\n    font-size: 1rem;\n    line-height: 1.2;\n    position: relative;\n    z-index: 1;\n  }\n\n  @media (max-width: 700px) {\n    .postit-wrap {\n      padding: 0 14px;\n    }\n\n    .postit-row {\n      gap: 14px;\n    }\n\n    .floating-postit {\n      width: 102px;\n      min-height: 122px;\n      padding: 16px 12px 12px;\n      transform: none !important;\n    }\n\n    .floating-postit strong {\n      font-size: 1.15rem;\n    }\n\n    .floating-postit span.text {\n      font-size: 0.9rem;\n    }\n\n    .focus-controls {\n      top: 10px;\n      right: 10px;\n      gap: 8px;\n    }\n\n    .focus-btn {\n      width: 40px;\n      height: 40px;\n    }\n\n    .focus-panel-wrap {\n      padding: 64px 14px 18px;\n    }\n\n    .focus-notes {\n      gap: 14px;\n    }\n\n    .focus-note {\n      width: 100%;\n      min-height: auto;\n      transform: none !important;\n    }\n  }\n<\/style>\n\n<div class=\"postit-wrap\">\n  <div class=\"postit-row\">\n    <a\n      class=\"floating-postit note-yellow\"\n      href=\"\/single-user-mode\/infoboard\/\"\n      aria-label=\"\u00c5bn mit board\">\n      <span class=\"pin\"><\/span>\n      <strong>Mit board<\/strong>\n      <span class=\"text\">Spor, fund<br>og problemfelt<\/span>\n    <\/a>\n\n    <a\n      class=\"floating-postit note-red\"\n      href=\"https:\/\/karina.getoutline.com\/s\/06b7b21b-5a9d-4390-a152-5f05672b8869\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      aria-label=\"\u00c5bn opgaven i Outline\">\n      <span class=\"pin\"><\/span>\n      <strong>Opgaven<\/strong>\n      <span class=\"text\">L\u00e6s projektet<br>i Outline<\/span>\n    <\/a>\n\n    <button class=\"floating-postit note-orange\" id=\"openFocusNote\" type=\"button\" aria-label=\"\u00c5bn fokus nu\">\n      <span class=\"pin\"><\/span>\n      <strong>Fokus nu<\/strong>\n      <span class=\"text\">Indgang, atmosf\u00e6re<br>og kunder udefra<\/span>\n    <\/button>\n\n    <a\n      class=\"floating-postit note-blue\"\n      href=\"https:\/\/miro.com\/app\/board\/uXjVJnyZ7HM=\/?share_link_id=214567468654\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      aria-label=\"\u00c5bn vores Miro board\">\n      <span class=\"pin\"><\/span>\n      <strong>Miro<\/strong>\n      <span class=\"text\">\u00c5bn vores<br>board i Miro<\/span>\n    <\/a>\n  <\/div>\n<\/div>\n\n<div class=\"focus-modal\" id=\"focusModal\" aria-hidden=\"true\">\n  <div class=\"focus-panel-wrap\">\n    <div class=\"focus-controls\">\n      <button class=\"focus-btn\" id=\"closeFocusNote\" type=\"button\" aria-label=\"Luk\">\u00d7<\/button>\n    <\/div>\n\n    <div class=\"focus-panel\">\n      <h2 class=\"focus-title\">Fokus nu<\/h2>\n\n      <div class=\"focus-intro\">\n        Projektet har bev\u00e6get sig fra kundeoplevelse bredt forst\u00e5et til et mere pr\u00e6cist fokus p\u00e5 indgangen, atmosf\u00e6ren og m\u00f8det med kunder udefra.\n      <\/div>\n\n      <div class=\"focus-notes\">\n        <article class=\"focus-note yellow\">\n          <h3>Indgangen<\/h3>\n          <p>Ankomst, m\u00f8de, f\u00f8rste indtryk og orientering i butikken.<\/p>\n        <\/article>\n\n        <article class=\"focus-note red\">\n          <h3>Kunder udefra<\/h3>\n          <p>Kunder, som ikke p\u00e5 forh\u00e5nd kender butikkens rytmer, koder og rumlige logik.<\/p>\n        <\/article>\n\n        <article class=\"focus-note orange\">\n          <h3>Atmosf\u00e6re<\/h3>\n          <p>Lokal stemning, socialitet og sanselige kvaliteter i kundeoplevelsen.<\/p>\n        <\/article>\n\n        <article class=\"focus-note pink\">\n          <h3>Problemfelt nu<\/h3>\n          <p>Hvordan kan butikkens lokale kvaliteter, orientering og atmosf\u00e6re blive mere l\u00e6sbare for kunder udefra \u2014 uden at sv\u00e6kke det, der allerede g\u00f8r stedet trygt og lokalt?<\/p>\n        <\/article>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n  const openFocusNote = document.getElementById(\"openFocusNote\");\n  const focusModal = document.getElementById(\"focusModal\");\n  const closeFocusNote = document.getElementById(\"closeFocusNote\");\n\n  function openFocusModal() {\n    focusModal.classList.add(\"active\");\n    focusModal.setAttribute(\"aria-hidden\", \"false\");\n    document.body.style.overflow = \"hidden\";\n  }\n\n  function closeFocusModal() {\n    focusModal.classList.remove(\"active\");\n    focusModal.setAttribute(\"aria-hidden\", \"true\");\n    document.body.style.overflow = \"\";\n  }\n\n  openFocusNote.addEventListener(\"click\", openFocusModal);\n  closeFocusNote.addEventListener(\"click\", closeFocusModal);\n\n  focusModal.addEventListener(\"click\", (e) => {\n    if (e.target === focusModal) {\n      closeFocusModal();\n    }\n  });\n\n  document.addEventListener(\"keydown\", (e) => {\n    if (e.key === \"Escape\") {\n      if (focusModal.classList.contains(\"active\")) {\n        closeFocusModal();\n      }\n    }\n  });\n<\/script>\n\n\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignwide 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=\"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:66.66%\">\n<div style=\"height:17px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n\n\n<div class=\"pv-wrap pv-wrap--right pv-wrap--simple\">\n  <style>\n    .pv-wrap {\n      --pv-red: #c81f35;\n      --pv-red-dark: #8e1727;\n      --pv-red-soft: #e85a68;\n\n      --pv-bg: #070707;\n      --pv-text: #f8f3ec;\n      --pv-muted: rgba(248,243,236,0.78);\n\n      --pv-note-1: #fff3a6;\n      --pv-note-2: #ffd9e0;\n      --pv-note-3: #d9f0ff;\n      --pv-note-4: #e6ffd7;\n      --pv-note-5: #ffe7c2;\n      --pv-note-6: #f1ddff;\n\n      max-width: 760px;\n      margin: 0;\n      color: var(--pv-text);\n      font-family: inherit;\n    }\n\n    .pv-wrap--right {\n      margin-left: auto;\n      margin-right: 0;\n    }\n\n    .pv-stage {\n      background:\n        radial-gradient(circle at 15% 16%, rgba(212,20,50,0.08), transparent 22%),\n        radial-gradient(circle at 84% 12%, rgba(255,255,255,0.03), transparent 18%),\n        var(--pv-bg);\n      border: 2px solid rgba(0,0,0,0.92);\n      border-radius: 28px;\n      overflow: hidden;\n      box-shadow:\n        0 0 0 1px rgba(255,255,255,0.03),\n        0 18px 38px rgba(0,0,0,0.24);\n    }\n\n    .pv-hero {\n      position: relative;\n      min-height: 390px;\n      display: flex;\n      align-items: flex-end;\n      padding: 22px;\n      background:\n        linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.32) 30%, rgba(0,0,0,0.10) 60%, rgba(0,0,0,0.14) 100%),\n        url(\"https:\/\/itdd.au.dk\/single-user-mode\/wp-content\/uploads\/sites\/103\/2026\/03\/handilin-myrkt.webp\") center\/cover no-repeat;\n    }\n\n    .pv-hero::after {\n      content: \"\";\n      position: absolute;\n      inset: auto 0 0 0;\n      height: 4px;\n      background:\n        linear-gradient(\n          90deg,\n          transparent 0%,\n          rgba(212,20,50,0.16) 16%,\n          rgba(212,20,50,0.6) 50%,\n          rgba(212,20,50,0.16) 84%,\n          transparent 100%\n        );\n      z-index: 1;\n    }\n\n    .pv-hero-inner {\n      position: relative;\n      z-index: 2;\n      max-width: 460px;\n      margin-left: auto;\n      text-align: right;\n    }\n\n    .pv-kicker {\n      display: inline-block;\n      margin: 0 0 10px;\n      padding: 7px 12px;\n      border: 2px solid rgba(0,0,0,0.92);\n      border-radius: 999px;\n      background: rgba(200,31,53,0.86);\n      color: #fff;\n      font-size: 10px;\n      font-weight: 800;\n      letter-spacing: 0.12em;\n      text-transform: uppercase;\n      box-shadow: 2px 2px 0 rgba(0,0,0,0.88);\n    }\n\n    .pv-title {\n      margin: 0;\n      font-size: clamp(26px, 3.1vw, 38px);\n      line-height: 1.04;\n      font-weight: 820;\n      letter-spacing: -0.03em;\n      text-wrap: balance;\n      text-shadow: 0 3px 12px rgba(0,0,0,0.28);\n    }\n\n    .pv-actions {\n      margin-top: 18px;\n      display: flex;\n      flex-direction: column;\n      align-items: flex-end;\n      gap: 10px;\n    }\n\n    .pv-toggle {\n      position: relative;\n      appearance: none;\n      border: 0;\n      background: transparent;\n      padding: 0;\n      cursor: pointer;\n      font: inherit;\n      color: inherit;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    .pv-toggle:focus-visible {\n      outline: 2px solid rgba(230,59,46,0.4);\n      outline-offset: 4px;\n      border-radius: 18px;\n    }\n\n    .pv-toggle-shell {\n      position: relative;\n      width: 252px;\n      height: 64px;\n      display: block;\n    }\n\n    .pv-toggle-base {\n      position: absolute;\n      inset: 0;\n      z-index: 1;\n      border-radius: 18px;\n      border: 2px solid #000;\n      background: linear-gradient(180deg, #241415 0%, #120809 100%);\n      overflow: hidden;\n      box-shadow:\n        0 10px 24px rgba(0,0,0,0.24),\n        inset 0 1px 0 rgba(255,255,255,0.04);\n    }\n\n    .pv-toggle-base::before {\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      background:\n        linear-gradient(180deg, rgba(255,255,255,0.05), transparent 45%),\n        repeating-linear-gradient(\n          -18deg,\n          rgba(255,255,255,0.03) 0 8px,\n          rgba(255,255,255,0) 8px 16px\n        );\n      pointer-events: none;\n    }\n\n    .pv-toggle-eyes {\n      position: absolute;\n      top: 50%;\n      right: 16px;\n      transform: translateY(-50%);\n      display: flex;\n      gap: 8px;\n      align-items: center;\n      pointer-events: none;\n      z-index: 1;\n    }\n\n    .pv-toggle-eye {\n      position: relative;\n      width: 18px;\n      height: 18px;\n      border-radius: 50%;\n      background: #fff;\n      overflow: hidden;\n      border: 2px solid #111;\n      box-shadow:\n        0 2px 4px rgba(0,0,0,0.14),\n        inset 0 0 0 1px rgba(255,255,255,0.45);\n      animation: pv-eye-blink 3.6s infinite;\n    }\n\n    .pv-toggle-pupil {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      width: 7px;\n      height: 7px;\n      border-radius: 50%;\n      background: #111;\n      transform: translate(-50%, -50%);\n      transition: transform 0.08s linear;\n    }\n\n    .pv-toggle-cover {\n      position: absolute;\n      inset: 0;\n      z-index: 3;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 12px;\n      padding: 0 12px 0 16px;\n      border-radius: 18px;\n      border: 2px solid #000;\n      background:\n        linear-gradient(\n          180deg,\n          #3a2a2c 0%,\n          #2b1f21 56%,\n          #1a1113 100%\n        );\n      color: rgba(255,255,255,0.96);\n      box-shadow:\n        0 8px 18px rgba(0,0,0,0.18),\n        inset 0 1px 0 rgba(255,255,255,0.05),\n        inset 0 -8px 14px rgba(0,0,0,0.14);\n      transition:\n        transform 0.3s ease,\n        box-shadow 0.22s ease,\n        background 0.28s ease,\n        color 0.22s ease;\n    }\n\n    .pv-toggle:hover .pv-toggle-cover,\n    .pv-toggle:focus-visible .pv-toggle-cover {\n      transform: translateY(-1px);\n      box-shadow:\n        0 12px 20px rgba(0,0,0,0.2),\n        inset 0 1px 0 rgba(255,255,255,0.06),\n        inset 0 -8px 14px rgba(0,0,0,0.16);\n    }\n\n    .pv-stage.is-open .pv-toggle-cover {\n      background:\n        linear-gradient(\n          180deg,\n          #ff766c 0%,\n          #df3a44 45%,\n          #a51a28 100%\n        );\n      color: #fff;\n      box-shadow:\n        0 12px 22px rgba(165,26,40,0.28),\n        0 0 0 2px rgba(255,255,255,0.08),\n        inset 0 1px 0 rgba(255,255,255,0.18);\n    }\n\n    .pv-toggle-text {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 3px;\n      min-width: 0;\n      text-align: left;\n      position: relative;\n      z-index: 1;\n    }\n\n    .pv-toggle-label {\n      font-size: 0.94rem;\n      font-weight: 800;\n      letter-spacing: 0.01em;\n      line-height: 1;\n    }\n\n    .pv-toggle-sub {\n      font-size: 0.66rem;\n      font-weight: 700;\n      letter-spacing: 0.12em;\n      text-transform: uppercase;\n      opacity: 0.82;\n      line-height: 1;\n    }\n\n    .pv-toggle-icon {\n      width: 28px;\n      height: 28px;\n      flex: 0 0 28px;\n      border: 1.5px solid currentColor;\n      border-radius: 999px;\n      display: inline-grid;\n      place-items: center;\n      font-size: 14px;\n      line-height: 1;\n      background: rgba(0,0,0,0.08);\n      transition: transform 0.25s ease;\n      position: relative;\n      z-index: 1;\n    }\n\n    .pv-stage.is-open .pv-toggle-icon {\n      transform: rotate(180deg);\n      background: rgba(255,255,255,0.12);\n    }\n\n    .pv-note {\n      font-size: 12.5px;\n      line-height: 1.45;\n      color: var(--pv-muted);\n      max-width: 32ch;\n      text-align: right;\n    }\n\n    .pv-helper {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      margin-top: 2px;\n      padding: 6px 10px;\n      border-radius: 999px;\n      background: rgba(255,255,255,0.08);\n      color: rgba(255,244,207,0.94);\n      font-size: 11px;\n      font-weight: 700;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n    }\n\n    .pv-helper-dot {\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      background: #ff8d83;\n      box-shadow: 0 0 0 4px rgba(255,141,131,0.12);\n    }\n\n    .pv-caption {\n      margin: 0;\n      padding: 14px 24px 18px;\n      font-size: 14px;\n      line-height: 1.6;\n      color: rgba(248,243,236,0.9);\n      background: rgba(255,255,255,0.02);\n      border-top: 1px solid rgba(255,255,255,0.05);\n    }\n\n    .pv-folds {\n      max-height: 0;\n      overflow: hidden;\n      opacity: 0;\n      padding: 0 24px;\n      background:\n        linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.01) 100%);\n      transition:\n        max-height 0.45s ease,\n        opacity 0.28s ease,\n        padding 0.32s ease;\n    }\n\n    .pv-stage.is-open .pv-folds {\n      max-height: 1400px;\n      opacity: 1;\n      padding: 18px 24px 24px;\n    }\n\n    .pv-stack {\n      margin: 0;\n      padding: 0;\n      list-style: none;\n      display: grid;\n      gap: 14px;\n    }\n\n    .pv-item {\n      position: relative;\n      transform-origin: top center;\n      transform: translateY(-8px);\n      opacity: 0;\n      transition:\n        transform 0.28s ease,\n        opacity 0.22s ease;\n    }\n\n    .pv-stage.is-open .pv-item {\n      transform: translateY(0);\n      opacity: 1;\n    }\n\n    .pv-stage.is-open .pv-item:nth-child(1) { transition-delay: 0.02s; }\n    .pv-stage.is-open .pv-item:nth-child(2) { transition-delay: 0.05s; }\n    .pv-stage.is-open .pv-item:nth-child(3) { transition-delay: 0.08s; }\n    .pv-stage.is-open .pv-item:nth-child(4) { transition-delay: 0.11s; }\n    .pv-stage.is-open .pv-item:nth-child(5) { transition-delay: 0.14s; }\n    .pv-stage.is-open .pv-item:nth-child(6) { transition-delay: 0.17s; }\n\n    .pv-card {\n      position: relative;\n      border: 2px solid #111;\n      border-radius: 10px;\n      box-shadow:\n        0 8px 18px rgba(0,0,0,0.12),\n        3px 3px 0 rgba(0,0,0,0.72);\n      overflow: hidden;\n    }\n\n    .pv-item:nth-child(1) .pv-card { background: var(--pv-note-1); transform: rotate(-1deg); }\n    .pv-item:nth-child(2) .pv-card { background: var(--pv-note-2); transform: rotate(0.8deg); }\n    .pv-item:nth-child(3) .pv-card { background: var(--pv-note-3); transform: rotate(-0.7deg); }\n    .pv-item:nth-child(4) .pv-card { background: var(--pv-note-4); transform: rotate(1deg); }\n    .pv-item:nth-child(5) .pv-card { background: var(--pv-note-5); transform: rotate(-0.5deg); }\n    .pv-item:nth-child(6) .pv-card { background: var(--pv-note-6); transform: rotate(0.7deg); }\n\n    .pv-card::before {\n      content: \"\";\n      position: absolute;\n      top: 10px;\n      right: 14px;\n      width: 24px;\n      height: 8px;\n      border-radius: 999px;\n      background: rgba(255,255,255,0.52);\n      box-shadow: 0 1px 2px rgba(0,0,0,0.08);\n      transform: rotate(-8deg);\n    }\n\n    .pv-card-inner {\n      padding: 16px 18px;\n      display: grid;\n      gap: 5px;\n    }\n\n    .pv-label {\n      margin: 0;\n      font-size: 10px;\n      font-weight: 900;\n      letter-spacing: 0.14em;\n      text-transform: uppercase;\n      color: rgba(17,17,17,0.72);\n    }\n\n    .pv-value {\n      margin: 0;\n      font-size: 15px;\n      font-weight: 700;\n      line-height: 1.5;\n      color: #111;\n      text-wrap: pretty;\n    }\n\n    .pv-value a {\n      color: #8e1727;\n      text-decoration: underline;\n      text-decoration-thickness: 2px;\n      text-underline-offset: 0.14em;\n      font-weight: 800;\n    }\n\n    .pv-value a:hover {\n      color: #c81f35;\n    }\n\n    .pv-close-hint {\n      max-height: 0;\n      overflow: hidden;\n      opacity: 0;\n      transition: opacity 0.22s ease, max-height 0.22s ease;\n    }\n\n    .pv-stage.is-open .pv-close-hint {\n      max-height: 50px;\n      opacity: 1;\n      margin-top: 14px;\n      font-size: 12px;\n      color: rgba(255,244,207,0.82);\n      text-align: right;\n    }\n\n    @keyframes pv-eye-blink {\n      0%, 90%, 100% { transform: scaleY(1); }\n      94% { transform: scaleY(0.08); }\n    }\n\n    @media (max-width: 700px) {\n      .pv-wrap,\n      .pv-wrap--right {\n        max-width: 100%;\n        margin-left: 0;\n        margin-right: 0;\n      }\n\n      .pv-hero {\n        min-height: 328px;\n        padding: 18px;\n      }\n\n      .pv-title {\n        font-size: 27px;\n      }\n\n      .pv-toggle-shell {\n        width: 220px;\n        height: 58px;\n      }\n\n      .pv-toggle-cover,\n      .pv-toggle-base {\n        border-radius: 16px;\n      }\n\n      .pv-caption {\n        padding: 12px 18px 16px;\n        font-size: 14px;\n      }\n\n      .pv-stage.is-open .pv-folds {\n        padding: 16px 18px 18px;\n      }\n\n      .pv-folds {\n        padding: 0 18px;\n      }\n\n      .pv-stage {\n        border-radius: 18px;\n      }\n\n      .pv-card-inner {\n        padding: 14px 15px;\n      }\n\n      .pv-value {\n        font-size: 14px;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .pv-item,\n      .pv-toggle-cover,\n      .pv-toggle-icon,\n      .pv-toggle-pupil,\n      .pv-toggle-eye,\n      .pv-folds {\n        transition: none;\n        animation: none;\n      }\n\n      .pv-card {\n        transform: none !important;\n      }\n    }\n  <\/style>\n\n  <section class=\"pv-stage\" id=\"ahandil-stage-simple\">\n    <div class=\"pv-hero\">\n      <div class=\"pv-hero-inner\">\n        <div class=\"pv-kicker\">Discover-fase<\/div>\n\n        <h2 class=\"pv-title\">\u00c1 handil \u00ed Vestmanna<\/h2>\n\n        <div class=\"pv-actions\">\n          <button\n            class=\"pv-toggle\"\n            id=\"pvToggleSimple\"\n            type=\"button\"\n            aria-expanded=\"false\"\n            aria-controls=\"ahandil-folds-simple\"\n          >\n            <span class=\"pv-toggle-shell\">\n              <span class=\"pv-toggle-base\" aria-hidden=\"true\">\n                <span class=\"pv-toggle-eyes\">\n                  <span class=\"pv-toggle-eye\"><span class=\"pv-toggle-pupil\"><\/span><\/span>\n                  <span class=\"pv-toggle-eye\"><span class=\"pv-toggle-pupil\"><\/span><\/span>\n                <\/span>\n              <\/span>\n\n              <span class=\"pv-toggle-cover\">\n                <span class=\"pv-toggle-text\">\n                  <span class=\"pv-toggle-label\">\u00c5bn hurtig info<\/span>\n                  <span class=\"pv-toggle-sub\">Klik for fakta og links<\/span>\n                <\/span>\n\n                <span class=\"pv-toggle-icon\">\u25be<\/span>\n              <\/span>\n            <\/span>\n          <\/button>\n\n          <div class=\"pv-helper\">\n            <span class=\"pv-helper-dot\"><\/span>\n            Folder ud nedenfor\n          <\/div>\n\n          <div class=\"pv-note\">\n            Her finder du korte fakta om supermarkedet, kontaktoplysninger og link videre.\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <p class=\"pv-caption\">\n      I Discover-fasen unders\u00f8ger jeg \u00c1 handil \u00ed Vestmanna som case med fokus p\u00e5 ankomst, indgang og kundens f\u00f8rste m\u00f8de med butikken.\n    <\/p>\n\n    <div class=\"pv-folds\" id=\"ahandil-folds-simple\" hidden>\n      <ol class=\"pv-stack\">\n        <li class=\"pv-item\">\n          <article class=\"pv-card\">\n            <div class=\"pv-card-inner\">\n              <p class=\"pv-label\">Case<\/p>\n              <p class=\"pv-value\">\u00c1 handil \u00ed Vestmanna er det supermarked, jeg unders\u00f8ger som case i min Discover-fase.<\/p>\n            <\/div>\n          <\/article>\n        <\/li>\n\n        <li class=\"pv-item\">\n          <article class=\"pv-card\">\n            <div class=\"pv-card-inner\">\n              <p class=\"pv-label\">Adresse<\/p>\n              <p class=\"pv-value\">Fjar\u00f0arvegur 12, 350 Vestmanna<\/p>\n            <\/div>\n          <\/article>\n        <\/li>\n\n        <li class=\"pv-item\">\n          <article class=\"pv-card\">\n            <div class=\"pv-card-inner\">\n              <p class=\"pv-label\">\u00c5bningstid<\/p>\n              <p class=\"pv-value\">Mandag\u2013l\u00f8rdag: 9.00\u201322.00<\/p>\n            <\/div>\n          <\/article>\n        <\/li>\n\n        <li class=\"pv-item\">\n          <article class=\"pv-card\">\n            <div class=\"pv-card-inner\">\n              <p class=\"pv-label\">Kontakt<\/p>\n              <p class=\"pv-value\">Tlf. 44 20 05<\/p>\n            <\/div>\n          <\/article>\n        <\/li>\n\n        <li class=\"pv-item\">\n          <article class=\"pv-card\">\n            <div class=\"pv-card-inner\">\n              <p class=\"pv-label\">Hjemmeside<\/p>\n              <p class=\"pv-value\"><a href=\"https:\/\/ahandil.fo\/\" target=\"_blank\" rel=\"noopener noreferrer\">Bes\u00f8g \u00c1\u2019s officielle hjemmeside<\/a><\/p>\n            <\/div>\n          <\/article>\n        <\/li>\n\n        <li class=\"pv-item\">\n          <article class=\"pv-card\">\n            <div class=\"pv-card-inner\">\n              <p class=\"pv-label\">Kort note<\/p>\n              <p class=\"pv-value\">\u00c1 indg\u00e5r i en st\u00f8rre k\u00e6de, som ogs\u00e5 arbejder med digitale l\u00f8sninger. I dette projekt er fokus dog den fysiske butik og kundens f\u00f8rste m\u00f8de med stedet.<\/p>\n            <\/div>\n          <\/article>\n        <\/li>\n      <\/ol>\n\n      <div class=\"pv-close-hint\">Klik p\u00e5 knappen igen for at lukke oversigten.<\/div>\n    <\/div>\n  <\/section>\n\n  <script>\n    (function () {\n      var stage = document.getElementById(\"ahandil-stage-simple\");\n      var toggle = document.getElementById(\"pvToggleSimple\");\n      var panel = document.getElementById(\"ahandil-folds-simple\");\n\n      if (!stage || !toggle || !panel) return;\n\n      function setOpen(isOpen) {\n        stage.classList.toggle(\"is-open\", isOpen);\n        toggle.setAttribute(\"aria-expanded\", isOpen ? \"true\" : \"false\");\n        panel.hidden = false;\n\n        if (!isOpen) {\n          setTimeout(function () {\n            if (!stage.classList.contains(\"is-open\")) {\n              panel.hidden = true;\n            }\n          }, 420);\n        }\n      }\n\n      toggle.addEventListener(\"click\", function () {\n        var isOpen = !stage.classList.contains(\"is-open\");\n        setOpen(isOpen);\n      });\n\n      var pupils = toggle.querySelectorAll(\".pv-toggle-pupil\");\n      var eyesWrap = toggle.querySelector(\".pv-toggle-eyes\");\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(-3.5, Math.min(3.5, dx \/ 20));\n        var moveY = Math.max(-2.5, Math.min(2.5, dy \/ 20));\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      toggle.addEventListener(\"mousemove\", function (e) {\n        updateEyes(e.clientX, e.clientY);\n      });\n\n      toggle.addEventListener(\"mouseleave\", resetEyes);\n\n      toggle.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      toggle.addEventListener(\"touchend\", resetEyes);\n    })();\n  <\/script>\n<\/div>\n\n\n\n<div style=\"height:23px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\t<div id=\"respond\" style=\"border-style:none;border-width:0px;\" class=\"comment-respond wp-block-post-comments-form has-medium-font-size\">\n\t\t<h3 id=\"reply-title\" class=\"comment-reply-title\">Skriv et svar <small><a rel=\"nofollow\" id=\"cancel-comment-reply-link\" href=\"\/single-user-mode\/wp-json\/wp\/v2\/pages\/81#respond\" style=\"display:none;\">Annuller svar<\/a><\/small><\/h3><p class=\"must-log-in\">Du skal v\u00e6re <a href=\"https:\/\/itdd.au.dk\/single-user-mode\/wp-login.php?redirect_to=https%3A%2F%2Fitdd.au.dk%2Fsingle-user-mode%2Fdiscover%2F\">logget ind<\/a> for at skrive en kommentar.<\/p>\t<\/div><!-- #respond -->\n\t\n\n\n<div class=\"wp-block-comments has-border-color\" style=\"border-color:#f20808;border-width:2px;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:var(--wp--preset--spacing--20);padding-bottom:0;padding-left:var(--wp--preset--spacing--20)\">\n\n\n\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\" style=\"flex-basis:100%\">\n<div class=\"subtle-red-divider\">\n  <span><\/span>\n<\/div>\n\n<style>\n.subtle-red-divider {\n  width: 100%;\n  margin: 28px 0;\n}\n\n.subtle-red-divider span {\n  display: block;\n  width: 100%;\n  height: 1px;\n  border-radius: 999px;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    rgba(255, 0, 0, 0.08) 20%,\n    rgba(255, 0, 0, 0.35) 50%,\n    rgba(255, 0, 0, 0.08) 80%,\n    transparent 100%\n  );\n  background-size: 200% 100%;\n  animation: subtleLineMove 5s ease-in-out infinite;\n}\n\n@keyframes subtleLineMove {\n  0%   { background-position: 0% 0; opacity: 0.7; }\n  50%  { background-position: 100% 0; opacity: 1; }\n  100% { background-position: 0% 0; opacity: 0.7; }\n}\n<\/style>\n<\/div>\n<\/div>\n\n\n\n<style>\n  .wp-block-post-comments-form input#submit.wp-block-button__link.wp-element-button {\n    background: #d70f2f !important;\n    color: #fff !important;\n    border: none !important;\n  }\n\n  .wp-block-post-comments-form input#submit.wp-block-button__link.wp-element-button:hover {\n    background: #b90c28 !important;\n  }\n<\/style>\n\n\n\n<p><\/p>\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\" style=\"flex-basis:100%\"><\/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=\"subtle-red-divider\">\n  <span><\/span>\n<\/div>\n\n<style>\n.subtle-red-divider {\n  width: 100%;\n  margin: 28px 0;\n}\n\n.subtle-red-divider span {\n  display: block;\n  width: 100%;\n  height: 1px;\n  border-radius: 999px;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    rgba(255, 0, 0, 0.08) 20%,\n    rgba(255, 0, 0, 0.35) 50%,\n    rgba(255, 0, 0, 0.08) 80%,\n    transparent 100%\n  );\n  background-size: 200% 100%;\n  animation: subtleLineMove 5s ease-in-out infinite;\n}\n\n@keyframes subtleLineMove {\n  0%   { background-position: 0% 0; opacity: 0.7; }\n  50%  { background-position: 100% 0; opacity: 1; }\n  100% { background-position: 0% 0; opacity: 0.7; }\n}\n<\/style>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Discover \/ Empathize P\u00e5 denne side har jeg samlet mit arbejde i Discover-fasen i designprocessen. Her unders\u00f8ger jeg det dom\u00e6ne, projektet tager afs\u00e6t i, og arbejder med at opbygge en mere nuanceret forst\u00e5else af den praksis, jeg senere skal arbejde videre med. Projektets fokus Mit projekt tager udgangspunkt i kundeoplevelsen i \u00c1 handil \u00ed Vestmanna [&hellip;]<\/p>\n","protected":false},"author":85,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-81","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/pages\/81","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=81"}],"version-history":[{"count":237,"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/pages\/81\/revisions"}],"predecessor-version":[{"id":860,"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/pages\/81\/revisions\/860"}],"wp:attachment":[{"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/media?parent=81"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}