/* kopibogen.dk — forside (login + PWA QR, centreret). */

/* Selvhostet brødtekst-skrift: Nunito Sans (variabel, alle vægte i én fil).
   font-src 'self' — ingen CDN. */
@font-face{
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('../fonts/nunito-sans.woff2') format('woff2');
}

:root{
  --blaa:#1f3a6b; --blaa-mork:#16294f; --bg:#0f1932;
  --kant:#e2e8f2; --tekst:#1a2438; --dim:#5a6a86; --groen:#1f9d55;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  min-height:100dvh; position:relative;
  font-family:'Nunito Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:#eaf0fb;
  background:var(--bg);
  display:flex; flex-direction:column;
  padding-bottom:40px;                 /* plads til den faste footer */
}
/* Pixeleret hero-baggrund: en lille 96px-udgave skaleres op af browseren →
   chunky/pixeleret look. Overlay er let (mindre nedtonet), så billedet ses. */
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background:url('../img/hero-pixel.png') center/cover no-repeat;
  image-rendering:-moz-crisp-edges; image-rendering:pixelated;
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(20,38,70,.55) 0%, rgba(15,25,50,.80) 100%);
}

/* Topbar */
.topbar{
  display:flex; align-items:center; gap:12px;
  padding:16px 26px 4px; flex-wrap:wrap;
}
.topbar .logo{height:38px;width:auto;display:block}
.topbar .brand-blok{display:flex;flex-direction:column;line-height:1.15}
.topbar .brand{font-size:22px;font-weight:800;letter-spacing:.2px}
.topbar .brand .dk{color:#8fb3e6;font-weight:600}
/* MobilePay-krav: den ansvarlige virksomhed skal fremgå af tjenesten. */
.topbar .service{font-style:italic;font-size:12.5px;font-weight:400;color:#aebfdc;margin-top:1px}
.topbar .tagline{color:#aebfdc;font-size:13.5px;margin-left:auto}

/* Midterindhold */
.indhold{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:6px 18px 40px; text-align:center;   /* top-justeret: ~10px under logoet */
}
.indhold h1{
  margin:0 0 10px; font-size:clamp(30px,5.6vw,44px); line-height:1.15; font-weight:800;
  text-shadow:0 2px 16px rgba(0,0,0,.55);
}
.indhold h1 .fin{display:block;font-weight:800;color:#ffd9a3;font-size:.6em;margin-top:10px;letter-spacing:.3px}
.indhold .intro{
  margin:0 auto 26px; max-width:820px; color:#e4ecf8; font-size:16px; line-height:1.55;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}

/* Fordele-felter: bryder intro-teksten op i skanbare bidder. Lette "glas"-
   felter på den mørke hero, så de ikke konkurrerer med de hvide login-kort. */
/* 3-delt forside-layout: [2 områder] · [login + PWA] · [2 områder].
   Hvert område-kort er klikbart og åbner en info-modal. */
.forside-3{
  display:flex; gap:20px; align-items:center; justify-content:center;
  flex-wrap:wrap; width:100%; max-width:1240px; margin:2px auto 26px; text-align:left;
}
.side-kol{
  display:flex; flex-direction:column; gap:14px;
  flex:1 1 240px; min-width:220px; max-width:300px;
}
.fordel{
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px; padding:15px 18px;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  cursor:pointer; transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.fordel:hover,.fordel:focus-visible{
  background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.36);
  transform:translateY(-2px); outline:none;
}
.fordel .fordel-mer{ display:inline-block; margin-top:9px; font-size:13px; font-weight:800; color:#ffd9a3; }

/* Bredt bånd under login: forklarer app ↔ PC-samspillet (samme tekst som app-login). */
.samspil{
  width:100%; max-width:820px; margin:6px auto 26px; text-align:left;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
  border-radius:14px; padding:16px 20px; color:#dbe5f5; font-size:15px; line-height:1.55;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:flex; gap:12px; align-items:flex-start;
}
.samspil .ss-ik{ font-size:22px; line-height:1; flex:none; }
.samspil b{ color:#fff; }
.fordel .ikon{font-size:22px; line-height:1; margin-bottom:7px}
.fordel h3{
  margin:0 0 5px; font-size:16px; font-weight:800; color:#fff;
  display:flex; align-items:center; gap:8px;
}
.fordel p{margin:0; font-size:14px; line-height:1.5; color:#dbe5f5}

/* Kort-wrapper: login + QR side om side — midterkolonnen i forside-3 */
.kort-wrap{
  display:flex; gap:20px; align-items:stretch; justify-content:center;
  flex-wrap:wrap; width:100%; max-width:760px; flex:2 1 600px;
}
.kort{
  background:#fff; color:var(--tekst);
  border-radius:18px; box-shadow:0 22px 60px rgba(0,0,0,.34);
  text-align:left;
}

/* Login-boks */
.login-box{flex:1 1 340px; max-width:400px; padding:28px 28px 26px}
.login-box h2{margin:0 0 2px;font-size:22px;color:var(--blaa-mork)}
.login-box .under{margin:0 0 20px;color:var(--dim);font-size:14px}
.felt-grp{margin-bottom:14px}
.felt-grp label{display:block;font-size:13px;font-weight:700;color:#34415c;margin-bottom:6px}
.felt-grp input{
  width:100%; padding:13px 14px; font-size:16px; color:var(--tekst);
  border:1px solid #c3ccdb; border-radius:11px; background:#edf1f7;
}
.felt-grp input::placeholder{color:#8a95a8}
.felt-grp input:focus{outline:none;border-color:var(--blaa);background:#fff;box-shadow:0 0 0 3px rgba(31,58,107,.14)}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:44px}
.pw-oje{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:0;
  padding:0;margin:0;line-height:1;font-size:18px;cursor:pointer;color:#5a6675;opacity:.7}
.pw-oje:hover{opacity:1}
.raekke-mellem{display:flex;justify-content:space-between;align-items:center;margin:-4px 0 16px}
.glemt{color:var(--blaa);font-size:13px;text-decoration:none}
.glemt:hover{text-decoration:underline}
.btn-login{
  width:100%; padding:14px 18px; border:0; border-radius:11px; cursor:pointer;
  font-size:16px; font-weight:800; color:#fff; background:var(--blaa);
}
.btn-login:hover{background:#24467f}
.btn-login:active{transform:translateY(1px)}
.deler{display:flex;align-items:center;gap:12px;color:var(--dim);font-size:12.5px;margin:16px 0}
.deler::before,.deler::after{content:"";flex:1;height:1px;background:var(--kant)}
.opret-firma{
  display:block;text-align:center;padding:12px 16px;border-radius:11px;
  border:0;color:#fff;background:var(--blaa);font-weight:800;text-decoration:none;font-size:15px;
}
.opret-firma:hover{background:#24467f}
/* Sagsvalg efter login — vises kun når brugeren er med i flere kopibøger. */
.sagsvalg{margin-top:12px;border-top:1px solid var(--kant,#c8d2e0);padding-top:12px}
.sagsvalg-hd{font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;
             color:var(--tekst-dim,#5a6675);margin-bottom:8px;text-align:center}
.sagsvalg-knap{display:flex;justify-content:space-between;align-items:center;gap:10px;
               width:100%;margin-bottom:8px;padding:12px 14px;border-radius:8px;
               border:1px solid var(--kant,#c8d2e0);background:#fff;cursor:pointer;
               font-family:inherit;font-size:14px;text-align:left;
               transition:background .15s,border-color .15s}
.sagsvalg-knap:hover:not(:disabled){background:#eaf2fd;border-color:var(--blaa,#1f3a6b)}
.sagsvalg-knap:disabled{opacity:.5;cursor:default}
.sagsvalg-knap .sv-tekst{display:flex;flex-direction:column;gap:2px;min-width:0}
.sagsvalg-knap .sv-navn{font-weight:800;color:var(--blaa,#1f3a6b)}
.sagsvalg-knap .sv-sag{font-size:12.5px;color:var(--tekst-dim,#5a6675);line-height:1.35}
.sagsvalg-knap .sv-rolle{font-size:12px;color:var(--tekst-dim,#5a6675);flex:0 0 auto;white-space:nowrap}

.status{margin-top:14px;font-size:13.5px;min-height:1px;text-align:center}
.status.info{color:var(--blaa)}
.status.fejl{color:#c0392b}
.status.ok{color:var(--groen)}
.status.advar{color:#8a5a00;font-weight:700;background:#fdf0d9;border:1px solid #e6c48a;border-radius:9px;padding:9px 12px}
.besked-info{
  background:#fff6e5;border:1px solid #e0b060;border-radius:10px;
  padding:11px 13px;margin-bottom:16px;font-size:13.5px;color:#7a5200;
}

/* QR-panel */
.qr-panel{
  flex:1 1 260px; max-width:300px; padding:26px 24px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:linear-gradient(180deg,#f7faff 0%,#eef4fc 100%);
}
.qr-panel .qr-ikon{font-size:26px;margin-bottom:4px}
.qr-panel h3{margin:0 0 4px;font-size:17px;color:var(--blaa-mork)}
.qr-panel .qr-sub{margin:0 0 16px;color:var(--dim);font-size:13px;line-height:1.45}
.qr-panel #qrcode{
  background:#fff;padding:10px;border-radius:12px;border:1px solid var(--kant);
  box-shadow:0 6px 18px rgba(20,40,80,.10); line-height:0;
}
.qr-panel #qrcode img,.qr-panel #qrcode canvas{display:block}
/* Logo centreret i QR-koden. Koden genereres med fejlkorrektion H (se index.php),
   så de moduler logoet dækker, kan regnes tilbage af scanneren. Den hvide pude er
   ikke pynt: uden en ren kant flyder logoet sammen med mønstret, og scanneren
   tøver. Holdes bevidst lille — 44px af 172px = 26 % af bredden, ~7 % af arealet.
   Gør den større, og du bruger af den margin H giver: så SKAL den scannes igen
   på en rigtig telefon, ikke kun på skærmen. */
.qr-boks{position:relative;display:inline-block;line-height:0}
.qr-logo{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;background:#fff;border-radius:9px;
  box-shadow:0 0 0 2px #fff;pointer-events:none;
}
.qr-logo img{width:auto;height:30px;display:block}
/* Sættes af index.php NÅR logoet er bagt ind i selve billedet. Så er laget
   overflødigt — og to logoer oven på hinanden ville give en dobbeltkant. */
.qr-logo.skjul{display:none}
.qr-hints{margin-top:16px;font-size:12px;color:#4a5872;line-height:1.6;text-align:left}
.qr-hints b{color:var(--blaa-mork)}
.qr-obs{margin-top:8px;padding:8px 10px;background:#fff8e1;border:1px solid #e6cf7a;
  border-left:3px solid #d9a441;border-radius:6px;color:#5d4a12}
.qr-obs b{color:#5d4a12}

/* Mellembred: side-kolonnerne lægger sig som rækker over/under midten
   (2 områder øverst, login+PWA, 2 områder nederst). */
@media (max-width:900px){
  .side-kol{flex:1 1 100%; max-width:none; flex-direction:row}
  .side-kol .fordel{flex:1}
}
@media (max-width:560px){
  .topbar{justify-content:center}
  .topbar .tagline{width:100%;text-align:center;margin:4px 0 0}
  .qr-panel{max-width:400px}
  .login-box{max-width:400px}
  .side-kol{flex-direction:column}
}

/* Notepad/tablet (berøringsskærm): dæmp overskriften + de to undertekster en
   anelse — KUN her. PC (pointer: fine) er uændret, og telefoner redirectes til
   app'en, så de rammes ikke. */
@media (pointer: coarse){
  .indhold h1      { font-size:clamp(24px,4.4vw,32px); }
  .indhold h1 .fin { font-size:.55em; }
  .indhold .intro  { font-size:14px; }
}

/* ── Tåget fade-bånd over footeren ─────────────────────────────────────────
   Ligger lige over den faste 40px-footer, i samme fulde bredde. Indholdet
   fader og sløres blødt ned i "tågen", når siden scroller. Højden (8vh) kan
   justeres frit. pointer-events:none → spærrer aldrig for klik. */
.tage{
  position:fixed; left:0; right:0; bottom:40px;   /* 40px = footerens højde */
  height:8vh; z-index:59;                          /* under footeren (60), over indhold */
  pointer-events:none;
  /* Fader til forsidens mørke bund, så indhold "forsvinder" ned i tågen. */
  background:linear-gradient(180deg,
              rgba(15,25,50,0)   0%,
              rgba(15,25,50,.55) 45%,
              rgba(14,22,44,.94) 100%);
  /* Sløringen tiltager nedad → frostet "tåge"-look (maske gør blur+fade blød foroven). */
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 60%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 60%);
}
@media print{ .tage{ display:none; } }