/* ===========================================================================
   ICEL Kurser - stilark
   ===========================================================================

   Skrevet som ÉT lag. Den tidligere udgave var fem lag oven paa hinanden med
   2143 linjer og 356 regler, hvor .icel-kurser var defineret to gange med hver
   sin farvepalet, og .icel-hero__titel syv gange. Derfor kraevede hver rettelse
   endnu en rettelse.

   TO TING ER AFGOERENDE AT FORSTAA, FOER DER RETTES HERI:

   1. Temaet OceanWP saetter `html { font-size: 87.5% }`, altsaa 14 px i stedet
      for browserens normale 16. Alt skrevet i `rem` bliver dermed 12,5 % mindre
      end tiltaenkt - broedteksten blev 14 px, de smaa noter 11,9 px, mærkaterne
      10,6 px. Det var derfor siden virkede lille og sammenpresset.

      Derfor bruger dette stilark IKKE rem. Grundstoerrelsen saettes eksplicit
      paa .icel-kurser, og alt andet regnes ud fra egne variabler i px. Blokken
      er dermed uafhaengig af, hvad temaet finder paa - ogsaa efter en
      opdatering af OceanWP.

   2. Temaet beder om skriften "Open Sans", men henter den aldrig - der er
      hverken Google Fonts, @font-face eller skriftfiler paa sitet. Browseren
      faldt derfor tilbage paa sin egen sans-serif, som paa Windows er Arial.
      Skriften var altsaa ikke valgt; den var det, der blev tilbage.

      Her vaelges systemskriften bevidst: Segoe UI paa Windows, San Francisco
      paa Mac og iPhone, Roboto paa Android. Den indlaeses oejeblikkeligt,
      henter ingenting, og ser hjemmevant ud paa hver enhed.

   OPBYGNING
     1. Grundlag - variabler, skrift, nulstilling
     2. Rammer - indhold, afsnit
     3. Hero
     4. Kursuskort
     5. Emner
     6. Betalingsboks
     7. Medlemsboks
     8. Formular
     9. Kvittering
    10. Knapper og beskeder
    11. Temaets egne dele
    12. Telefon og tablet

   Rettes en stoerrelse eller en afstand, sker det i variablerne i afsnit 1.
   =========================================================================== */


/* ===========================================================================
   1. GRUNDLAG
   =========================================================================== */

.icel-kurser {
    /* --- Skrift ---------------------------------------------------------
       Systemskriften. Ingen hentning, ingen ventetid, og bogstaverne er
       tegnet til netop den skaerm, brugeren sidder ved. */
    --skrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", "Noto Sans", Arial, sans-serif;

    /* --- Stoerrelser ----------------------------------------------------
       Faste px, saa temaets 14 px-rod ikke kan krympe dem. Trinnene er
       valgt, saa der er tydelig forskel paa hvert skridt - er trinnene for
       taette, ser siden ubeslutsom ud. */
    --t-mikro:  13px;   /* mærkater, etiketter over tal */
    --t-lille:  15px;   /* noter, hjaelpetekst */
    --t-brod:   18px;   /* broedtekst - sidens grundstoerrelse */
    --t-stor:   20px;   /* fremhaevet broedtekst */
    --t-h4:     22px;
    --t-h3:     26px;
    --t-h2:     34px;
    --t-h1:     46px;

    /* --- Luft -----------------------------------------------------------
       Én skala i stedet for de 40 forskellige polstringsvaerdier, den
       gamle fil havde. Alt er et multiplum af 4 px, saa tingene flugter. */
    --luft-1:   4px;
    --luft-2:   8px;
    --luft-3:  12px;
    --luft-4:  16px;
    --luft-5:  24px;
    --luft-6:  32px;
    --luft-7:  48px;
    --luft-8:  64px;
    --luft-9:  96px;

    /* --- Farver ---------------------------------------------------------
       Dyb groen som grundtone, daempet guld som accent. Begge almindelige i
       islamisk kunsthaandvaerk. Al tekst er kontrolleret mod sin baggrund
       og ligger over 4,5:1, som er graensen for laesbarhed. */
    --gr-900: #073d2b;
    --gr-800: #0b563d;
    --gr-700: #137252;
    --gr-600: #1d8d65;
    --gr-100: #e4f0ea;
    --gr-050: #f2f8f5;

    --guld:     #a67c2e;   /* moerk nok til tekst paa lys baggrund */
    --guld-lys: #efd08b;
    --guld-100: #fbf4e4;

    --sand:    #f7f5f0;
    --linje:   #ddd9d0;
    --blaek:   #16241d;
    --daempet: #55635b;    /* 5,2:1 mod hvid */
    --roed:    #9a2226;
    --hvid:    #fff;

    /* --- Form ----------------------------------------------------------- */
    --runding:       16px;
    --runding-stor:  24px;
    --runding-lille: 10px;

    --skygge:       0 1px 2px rgba(7, 61, 43, .05), 0 10px 30px -14px rgba(7, 61, 43, .16);
    --skygge-loeft: 0 2px 6px rgba(7, 61, 43, .07), 0 22px 48px -20px rgba(7, 61, 43, .28);

    /* --- Anvendt -------------------------------------------------------- */
    font-family: var(--skrift);
    font-size: var(--t-brod);
    line-height: 1.7;              /* rummeligt - teksten skal kunne laeses laenge */
    color: var(--blaek);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icel-kurser *,
.icel-kurser *::before,
.icel-kurser *::after {
    box-sizing: border-box;
}

/* Temaet saetter egne stoerrelser og marginer paa overskrifter og afsnit.
   Her nulstilles de, saa vores egen skala er den, der gaelder.

   :where() er brugt med vilje. Uden den ville `.icel-kurser ul` (klasse +
   element) veje tungere end `.icel-kursusliste` (kun klasse), og
   nulstillingen ville slaa vores EGNE afstande ihjel. Det var praecis dét,
   der skete i foerste udgave: alle marginer paa lister og afsnit blev sat
   til nul, og siden saa sammenpresset ud. :where() har vaegt nul, saa
   enhver senere regel vinder. */
.icel-kurser :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) {
    margin: 0;
    padding: 0;
}

.icel-kurser :where(h1, h2, h3, h4) {
    font-family: var(--skrift);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--gr-900);
    /* En overskrift maa aldrig deles midt i et ord. */
    hyphens: none;
    overflow-wrap: break-word;
}

.icel-kurser :where(ul) { list-style: none; }

/* Temaet understreger alle links i indholdet med denne regel:
     .page:not(.elementor-page):not(.woocommerce-page) .entry a:not(...):not(...)
   Den vejer seks klasser. Et almindeligt modspil vejer to og taber.

   Derfor !important her. Det er den ene situation, hvor det er det rigtige
   svar: én egenskab, ét sted, mod en tredjeparts-regel vi ikke ejer. Uden
   den staar der understregning under "Tilmeld dig", og knappen ligner et
   link i stedet for en knap. */
.icel-kurser a.icel-knap,
.icel-kurser a.icel-knap:hover,
.icel-kurser a.icel-knap:focus,
.icel-kurser a.icel-knap:active,
.icel-kurser a.icel-knap:visited {
    text-decoration: none !important;
    text-underline-offset: 0 !important;
    box-shadow: none !important;
    border-bottom: 0 !important;
}

.icel-kurser :focus-visible {
    outline: 3px solid var(--gr-600);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Lange ord uden mellemrum - en mailadresse, et kontonummer - skal bryde
   frem for at skubbe siden bredere end skaermen. */
.icel-kurser {
    overflow-wrap: break-word;
}


/* ===========================================================================
   2. RAMMER
   =========================================================================== */

.icel-indhold {
    width: min(1180px, 100% - var(--luft-6));
    margin-inline: auto;
    padding-block: var(--luft-9) var(--luft-9);
}

.icel-indhold--smal {
    width: min(720px, 100% - var(--luft-6));
}

.icel-afsnit {
    /* 62ch, ikke 46. Ved 46 braekkede "Vælg en dato og meld dig til. Det
       tager under et minut." saa der stod "et" og "minut." paa hver sin
       linje - en enlig stavelse til sidst ser altid uheldig ud. */
    max-width: 62ch;
    margin-inline: auto;
    margin-bottom: var(--luft-7);
    text-align: center;
}

.icel-afsnit__titel {
    font-size: var(--t-h2);
    margin-bottom: var(--luft-3);
}

.icel-afsnit__under {
    font-size: var(--t-stor);
    color: var(--daempet);
}

/* Sidste element i en spalte skal ikke laegge sin bundmargin oven i
   spaltens egen polstring. Uden denne regel blev der 192 px tomt mellem
   emnerne og betalingsbaandet - 96 fra listen og 96 fra spalten. */
.icel-indhold > *:last-child { margin-bottom: 0; }


/* ===========================================================================
   3. HERO
   =========================================================================== */

.icel-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    align-items: center;
    /* 620 px - samme hoejde som Om os og Kontakt os, saa toppen staar stille,
       naar man klikker rundt. Frirummet foroven er menubjaelkens 92 px plus
       lidt luft; bjaelken ligger oven paa billedet. */
    min-height: 620px;
    padding-block: 105px var(--luft-8);
    /* Samme foto som resten af sitet. Adressen staar ét sted: i
       icel-faelles.css. Er den fil ikke indlaest, bliver feltet moerkegroent
       som foer, og teksten kan stadig laeses. */
    background: #062e23 var(--icel-faelles-hero, none) center/cover no-repeat;
    color: #fff;
    text-align: left;
}

/* Slaeret over fotoet. Kraftigst i venstre side, hvor teksten staar, og
   letter mod hoejre, saa man kan se, hvad billedet forestiller. Samme
   gradient som forsidens. */
.icel-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg,
        rgba(2, 25, 19, .96) 0%,
        rgba(3, 38, 28, .84) 42%,
        rgba(3, 31, 23, .2) 75%);
}

/* Blaend nedad, saa kanten mod naeste afsnit ikke bliver en streg. */
.icel-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 180px;
    z-index: -1;
    background: linear-gradient(transparent, rgba(3, 30, 22, .62));
}

/* Ottetakket stjernemoenster som svag tekstur. Tegnet som SVG i selve siden -
   ingen billedfil at hente, skarpt paa alle skaerme. */
/* Stjernemoenstret var tegnet til det flade groenne felt. Oven paa et foto
   bliver det stoej, og forsidens hero har ikke noget. Derfor slukket - men
   ikke slettet, saa det kan taendes igen, hvis fotoet en dag ryger ud. */
.icel-hero__moenster {
    display: none;
    position: absolute;
    inset: 0;
    z-index: -1;
    color: var(--guld-lys);
    opacity: .12;
    -webkit-mask-image: radial-gradient(80% 80% at 50% 20%, #000 0%, transparent 78%);
            mask-image: radial-gradient(80% 80% at 50% 20%, #000 0%, transparent 78%);
}

.icel-hero__moenster svg { display: block; width: 100%; height: 100%; }

.icel-hero__indhold {
    /* Samme ramme som forsidens: 1180 px med 20 px luft i hver side. */
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
}

.icel-hero__over {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    font-size: var(--t-mikro);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--guld-lys);
}

/* Én streg foran teksten - samme som forsidens overlinje. Foer stod der en
   streg paa hver side, fordi linjen var centreret. */
.icel-hero__over::before {
    content: "";
    width: 42px;
    height: 1px;
    background: var(--guld);
    flex: none;
}

.icel-hero__titel {
    max-width: 900px;
    margin-bottom: 24px;
    /* Samme skrift og samme trin som overskrifterne paa Om os og Kontakt os.
       Foer stod den i systemskriften og var dermed den eneste hero-overskrift
       paa sitet, der ikke var en serif. */
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(40px, 5.2vw, 66px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.045em;
    color: #fff;
}

.icel-hero__titel span { color: var(--guld-lys); font-style: normal; }

.icel-hero__brod {
    /* 600 px og ingen centrering - samme maal som forsidens manchet. */
    max-width: 600px;
    margin-inline: 0;
    margin-bottom: var(--luft-7);
    font-size: clamp(17px, 2vw, 21px);
    line-height: 1.7;
    color: rgba(255, 255, 255, .78);
}

/* De fire noeglepunkter */
.icel-hero__punkter {
    display: grid;
    /* To i bredden indenfor 660 px. Med fire strakte raekken sig ud over
       den lyse del af fotoet, og den hvide tekst i de to sidste felter var
       svaer at laese. Nu bliver de i det moerke omraade sammen med teksten. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--luft-3);
    max-width: 660px;
    margin-inline: 0;
    margin-bottom: var(--luft-7);
}

.icel-punkt {
    display: flex;
    align-items: center;
    gap: var(--luft-3);
    padding: var(--luft-4);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(239, 208, 139, .2);
    border-radius: var(--runding);
    /* Ikon til venstre, tekst ved siden af - den opstilling maa ikke
       centreres, saa braekker linjen. */
    text-align: left;
}

.icel-punkt__ikon {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--runding-lille);
    background: rgba(239, 208, 139, .15);
    color: var(--guld-lys);
}

.icel-punkt__ikon svg { width: 22px; height: 22px; }

.icel-punkt__tekst {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

.icel-punkt__tekst strong {
    font-size: var(--t-lille);
    font-weight: 600;
    color: #fff;
}

.icel-punkt__tekst small {
    font-size: var(--t-mikro);
    color: #9fbcae;
}

.icel-hero__handling {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--luft-4) var(--luft-6);
}

/* Knappen i heroet skal se ud som knapperne i de andre heroer: en pille med
   guldforloeb. Resten af kursus-flowet beholder sine egne firkantede
   knapper - de staar i formularen, hvor de hoerer hjemme. */
.icel-hero .icel-knap--stor {
    min-height: 58px;
    padding: 0 26px;
    border-radius: 999px;
    background: linear-gradient(135deg, #d0a751, #a77b29);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .25);
    color: #fff;
    font-size: var(--t-brod);
    font-weight: 800;
}

.icel-hero .icel-knap--stor:hover,
.icel-hero .icel-knap--stor:focus {
    background: linear-gradient(135deg, #dcb35c, #b98c33);
    color: #fff;
    transform: translateY(-2px);
}

.icel-hero__naeste {
    font-size: var(--t-lille);
    color: #9fbcae;
}

.icel-hero__naeste::before {
    content: "Næste: ";
    color: var(--guld-lys);
    font-weight: 600;
}


/* ===========================================================================
   4. KURSUSKORT
   =========================================================================== */

.icel-kursusliste {
    display: grid;
    gap: var(--luft-5);
    margin-bottom: var(--luft-9);
    /* To kort i bredden. Raekken valgte foer selv antallet ud fra en
       mindstebredde paa 260 px, og paa en stor skaerm blev det fire smalle
       kort. Ved to bliver hvert kort ca. 566 px, og datoblokken, titlen og
       knappen faar plads uden at braekke. Under 760 px staar de under
       hinanden - se bunden af filen. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.icel-kursus {
    display: flex;
    flex-direction: column;
    background: var(--hvid);
    border: 1px solid var(--linje);
    border-radius: var(--runding-stor);
    box-shadow: var(--skygge);
    overflow: hidden;
    text-align: left;
    transition: transform .2s ease, box-shadow .2s ease;
}

.icel-kursus:hover {
    transform: translateY(-4px);
    box-shadow: var(--skygge-loeft);
}

.icel-kursus--lukket {
    background: var(--sand);
    box-shadow: none;
}

.icel-kursus--lukket:hover { transform: none; box-shadow: none; }

/* Datoblokken - det oejet leder efter foerst */
.icel-kursus__dato {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--luft-5) var(--luft-4) var(--luft-4);
    background: linear-gradient(160deg, var(--gr-800), var(--gr-900));
    color: #fff;
    text-align: center;
}

.icel-kursus--lukket .icel-kursus__dato {
    background: linear-gradient(160deg, #67736d, #4a5551);
}

.icel-dato__dag {
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
}

.icel-dato__maaned {
    margin-top: var(--luft-1);
    font-size: var(--t-mikro);
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--guld-lys);
}

.icel-dato__ugedag {
    width: 100%;
    margin-top: var(--luft-3);
    padding-top: var(--luft-3);
    border-top: 1px solid rgba(255, 255, 255, .16);
    font-size: var(--t-mikro);
    color: #9fbcae;
}

.icel-kursus__krop {
    flex: 1;
    padding: var(--luft-5) var(--luft-5) var(--luft-3);
}

.icel-maerkat {
    display: inline-flex;
    align-items: center;
    gap: var(--luft-1);
    margin-bottom: var(--luft-3);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: var(--t-mikro);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.icel-maerkat svg { width: 15px; height: 15px; }

.icel-maerkat--maend   { background: #e1ebf6; color: #1a4270; }
.icel-maerkat--kvinder { background: #f5e6ee; color: #6f1e53; }
.icel-maerkat--alle    { background: var(--gr-100); color: var(--gr-800); }

.icel-kursus__titel {
    margin-bottom: var(--luft-4);
    font-size: var(--t-h4);
    line-height: 1.3;
}

.icel-detaljer {
    display: grid;
    gap: var(--luft-2);
    margin-bottom: var(--luft-4);
    font-size: var(--t-lille);
    color: var(--daempet);
    text-align: left;
}

.icel-detaljer li {
    display: flex;
    align-items: flex-start;
    gap: var(--luft-2);
    overflow-wrap: anywhere;
}

.icel-detaljer svg {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    color: var(--gr-600);
}

.icel-detaljer--lys { color: #c9ded4; }
.icel-detaljer--lys svg { color: var(--guld-lys); }

.icel-detaljer--stor {
    margin-bottom: var(--luft-6);
    gap: var(--luft-3);
    font-size: var(--t-brod);
    color: var(--blaek);
}

.icel-detaljer--stor svg { width: 21px; height: 21px; }

.icel-prislinje {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--luft-1) var(--luft-3);
    padding-top: var(--luft-3);
    border-top: 1px dashed var(--linje);
    font-size: var(--t-lille);
}

.icel-prislinje__gratis { font-weight: 700; color: var(--gr-700); }
.icel-prislinje__andre  { color: var(--daempet); }

.icel-kursus__fod { padding: 0 var(--luft-5) var(--luft-5); }

/* Pladsmaaleren siger noget, et tal alene ikke siger: hvor langt der er igen. */
.icel-maaler { margin-bottom: var(--luft-4); }

.icel-maaler__bjaelke {
    height: 6px;
    margin-bottom: var(--luft-2);
    border-radius: 999px;
    background: var(--gr-100);
    overflow: hidden;
}

.icel-maaler__bjaelke span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--gr-600);
    transition: width .3s ease;
}

.icel-maaler--faa .icel-maaler__bjaelke span { background: var(--guld); }

.icel-maaler__tekst {
    font-size: var(--t-mikro);
    color: var(--daempet);
}

.icel-maaler--faa .icel-maaler__tekst {
    font-weight: 600;
    color: #8a6320;
}


/* ===========================================================================
   5. EMNER
   =========================================================================== */

.icel-emner { margin-bottom: var(--luft-9); }

.icel-emneliste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--luft-3);
    margin-bottom: var(--luft-6);
}

.icel-emne {
    display: flex;
    align-items: center;
    gap: var(--luft-3);
    padding: var(--luft-4) var(--luft-5);
    background: var(--gr-050);
    border: 1px solid var(--gr-100);
    border-radius: var(--runding);
    font-size: var(--t-brod);
    font-weight: 500;
    color: var(--gr-900);
    text-align: left;
}

.icel-emne__nr {
    flex: none;
    font-size: var(--t-lille);
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--guld);
    font-variant-numeric: tabular-nums;
}

.icel-indeholder {
    display: grid;
    /* To i bredden. Raekken valgte foer selv antallet ud fra 260 px, og paa
       en bred skaerm blev det fire spalter - for smalle til, at
       "Moed andre muslimer og konvertitter" kunne staa paa én linje.
       Ved to bliver hver spalte 550 px, og alle fire tekster staar helt. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--luft-5) var(--luft-6);
    padding: var(--luft-6);
    background: var(--guld-100);
    border-radius: var(--runding-stor);
    font-size: var(--t-brod);
    text-align: left;
}

.icel-indeholder li {
    display: flex;
    align-items: center;
    gap: var(--luft-3);
    color: #4d3a12;
}

.icel-indeholder svg {
    flex: none;
    width: 24px;
    height: 24px;
    color: var(--guld);
}


/* ===========================================================================
   6. BETALINGSBOKS
   ===========================================================================
   Ligger UDENFOR den smalle spalte i selve opbygningen, saa baggrunden gaar
   fra kant til kant uden CSS-tricks med 100vw og negative marginer - den
   slags giver en vandret rullebjaelke, saa snart browseren har en lodret. */

.icel-bankboks {
    padding-block: var(--luft-9);
    padding-inline: max(var(--luft-5), calc((100% - 1120px) / 2));
    background: var(--sand);
    border-top: 1px solid var(--linje);
    border-bottom: 1px solid var(--linje);
    text-align: center;
}

/* Inde i formularen er den et kort, ikke et baand. */
.icel-bankboks--kompakt {
    margin-bottom: var(--luft-5);
    padding: var(--luft-5);
    background: var(--sand);
    border: 1px solid var(--linje);
    border-radius: var(--runding);
}

.icel-bankboks__hoved {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--luft-3);
    margin-bottom: var(--luft-6);
}

.icel-bankboks--kompakt .icel-bankboks__hoved {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    margin-bottom: var(--luft-4);
}

.icel-bankboks__ikon {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--runding);
    background: var(--guld-100);
    color: var(--guld);
}

.icel-bankboks__ikon svg { width: 26px; height: 26px; }

.icel-bankboks--kompakt .icel-bankboks__ikon { width: 42px; height: 42px; }
.icel-bankboks--kompakt .icel-bankboks__ikon svg { width: 21px; height: 21px; }

.icel-bankboks__titel { font-size: var(--t-h2); }
.icel-bankboks--kompakt .icel-bankboks__titel { font-size: var(--t-h4); }

.icel-bankboks__under {
    max-width: 52ch;
    margin-inline: auto;
    font-size: var(--t-stor);
    color: var(--daempet);
}

.icel-bankboks--kompakt .icel-bankboks__under {
    margin-inline: 0;
    font-size: var(--t-lille);
}

/* Tallene. Store og med luft mellem cifrene, saa de kan laeses hoejt eller
   tastes ind i netbanken uden at man mister sin plads. */
.icel-konto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--luft-4);
    max-width: 560px;
    margin-inline: auto;
    margin-bottom: var(--luft-5);
}

.icel-bankboks--kompakt .icel-konto {
    max-width: none;
    margin-bottom: var(--luft-4);
}

.icel-konto__felt {
    padding: var(--luft-4) var(--luft-5);
    background: var(--hvid);
    border: 1px solid var(--linje);
    border-radius: var(--runding);
    text-align: center;
}

.icel-konto__etiket {
    display: block;
    margin-bottom: var(--luft-1);
    font-size: var(--t-mikro);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--daempet);
}

.icel-konto__tal {
    display: block;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .05em;
    color: var(--gr-900);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.icel-bankboks--kompakt .icel-konto__tal { font-size: var(--t-h3); }

.icel-bankboks__modtager {
    margin-bottom: var(--luft-5);
    font-size: var(--t-lille);
    color: var(--daempet);
}

.icel-bankboks__modtager strong { color: var(--blaek); }

/* De to noter staar centreret som blokke, men teksten indeni er
   venstrestillet - flere linjer centreret tekst er uroligt at laese. */
.icel-bankboks__note,
.icel-bankboks__gratis {
    display: flex;
    align-items: flex-start;
    gap: var(--luft-3);
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: var(--luft-3);
    padding: var(--luft-4);
    border-radius: var(--runding);
    font-size: var(--t-lille);
    line-height: 1.6;
    text-align: left;
}

.icel-bankboks__note   { background: var(--guld-100); color: #4d3a12; }
.icel-bankboks__gratis { background: var(--gr-050); color: var(--gr-900); margin-bottom: 0; }

/* Ikonet er den ene spalte, HELE teksten den anden. Uden beholderen om
   teksten ville hvert <strong> blive sin egen spalte, og saetningen
   ville falde fra hinanden. */
.icel-note__ikon {
    flex: none;
    display: block;
    width: 20px;
    height: 20px;
    margin-top: 3px;
}

.icel-note__tekst { flex: 1; min-width: 0; }

.icel-bankboks__note svg,
.icel-bankboks__gratis svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.4;
}

.icel-bankboks__note svg   { color: var(--guld); }
.icel-bankboks__gratis svg { color: var(--gr-600); }


/* ===========================================================================
   7. MEDLEMSBOKS
   =========================================================================== */

.icel-medlemsboks {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: var(--luft-9);
    padding-inline: max(var(--luft-5), calc((100% - 1120px) / 2));
    background: linear-gradient(145deg, var(--gr-800), var(--gr-900));
    color: #eaf3ee;
    text-align: center;
}

.icel-medlemsboks__moenster {
    position: absolute;
    inset: 0;
    z-index: -1;
    color: var(--guld-lys);
    opacity: .1;
    -webkit-mask-image: radial-gradient(70% 100% at 50% 0%, #000 0%, transparent 75%);
            mask-image: radial-gradient(70% 100% at 50% 0%, #000 0%, transparent 75%);
}

.icel-medlemsboks__moenster svg { display: block; width: 100%; height: 100%; }

/* Indholdet skal ligge over moenstret, ikke bag det. */
.icel-medlemsboks__indhold { position: relative; }

.icel-medlemsboks__over {
    margin-bottom: var(--luft-3);
    font-size: var(--t-mikro);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--guld-lys);
}

.icel-medlemsboks h2 {
    /* Ingen maksimalbredde. Den var sat til 20 tegn, og overskriften er 29,
       saa den blev braekket midt i saetningen. Den fylder ca. 670 px ved
       46 px skrift, og boksen er 1120 px bred - der er rigeligt plads. */
    margin-inline: auto;
    margin-bottom: var(--luft-7);
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1.15;
    color: #fff;
    /* Skal den alligevel braekke paa en telefon, deles linjerne lige. */
    text-wrap: balance;
}

.icel-sammenlign {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--luft-4);
    max-width: 680px;
    margin-inline: auto;
    margin-bottom: var(--luft-6);
}

.icel-sammenlign__kort {
    padding: var(--luft-5);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: var(--runding-stor);
    text-align: center;
}

.icel-sammenlign__kort--frem {
    background: rgba(239, 208, 139, .14);
    border-color: rgba(239, 208, 139, .45);
}

.icel-sammenlign__navn {
    margin-bottom: var(--luft-2);
    font-size: var(--t-mikro);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #9fbcae;
}

.icel-sammenlign__kort--frem .icel-sammenlign__navn { color: var(--guld-lys); }

.icel-sammenlign__pris {
    margin-bottom: var(--luft-1);
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: #fff;
}

.icel-sammenlign__pris span {
    margin-left: var(--luft-1);
    font-size: var(--t-lille);
    font-weight: 500;
    letter-spacing: 0;
    color: #9fbcae;
}

.icel-sammenlign__note {
    font-size: var(--t-lille);
    color: #c9ded4;
}

.icel-medlemsboks__brod {
    max-width: 56ch;
    margin-inline: auto;
    margin-bottom: var(--luft-6);
    font-size: var(--t-h4);
    line-height: 1.5;
    color: #c9ded4;
}

.icel-medlemsboks p:last-child { margin-bottom: 0; }


/* ===========================================================================
   8. FORMULAR
   =========================================================================== */

.icel-valgt-kursus {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-bottom: var(--luft-6);
    padding: var(--luft-6);
    border-radius: var(--runding-stor);
    background: linear-gradient(145deg, var(--gr-800), var(--gr-900));
    color: #eaf3ee;
    text-align: left;
}

.icel-valgt-kursus__moenster {
    position: absolute;
    inset: 0;
    z-index: -1;
    color: var(--guld-lys);
    opacity: .1;
    -webkit-mask-image: radial-gradient(60% 100% at 100% 0%, #000 0%, transparent 70%);
            mask-image: radial-gradient(60% 100% at 100% 0%, #000 0%, transparent 70%);
}

.icel-valgt-kursus__moenster svg { display: block; width: 100%; height: 100%; }

.icel-valgt-kursus__over {
    margin-bottom: var(--luft-2);
    font-size: var(--t-mikro);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--guld-lys);
}

.icel-valgt-kursus__titel {
    margin-bottom: var(--luft-5);
    font-size: var(--t-h3);
    line-height: 1.25;
    color: #fff;
}

.icel-valgt-kursus .icel-detaljer { margin-bottom: 0; }

.icel-formular { margin-bottom: var(--luft-7); text-align: left; }

.icel-gruppe {
    margin-bottom: var(--luft-5);
    padding: var(--luft-6);
    background: var(--hvid);
    border: 1px solid var(--linje);
    border-radius: var(--runding-stor);
    box-shadow: var(--skygge);
    text-align: left;
}

.icel-gruppe--enkel { padding: var(--luft-5) var(--luft-6); }

.icel-gruppe legend {
    display: flex;
    align-items: center;
    gap: var(--luft-3);
    padding-inline: 0 var(--luft-3);
    font-size: var(--t-h4);
    font-weight: 700;
    color: var(--gr-900);
}

.icel-trin {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--gr-700);
    color: #fff;
    font-size: var(--t-lille);
    font-weight: 700;
}

.icel-raekke {
    display: grid;
    gap: 0 var(--luft-5);
}

.icel-felt { margin-bottom: var(--luft-5); text-align: left; }

.icel-felt label {
    display: block;
    margin-bottom: var(--luft-2);
    font-size: var(--t-lille);
    font-weight: 600;
    color: #2c3a33;
}

.icel-felt input[type="text"],
.icel-felt input[type="email"],
.icel-felt input[type="tel"] {
    width: 100%;
    min-height: 56px;
    padding: var(--luft-3) var(--luft-4);
    border: 2px solid #c4c0b6;
    border-radius: var(--runding-lille);
    background: var(--hvid);
    color: var(--blaek);
    /* 18 px er ogsaa mindstemaalet for, at iPhone ikke zoomer ind,
       naar man trykker i feltet. */
    font-size: var(--t-brod);
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.icel-felt input::placeholder { color: #97a09a; }

.icel-felt input:focus {
    outline: none;
    border-color: var(--gr-600);
    box-shadow: 0 0 0 4px rgba(29, 141, 101, .16);
}

.icel-krav { color: var(--roed); }

.icel-felt--fejl input { border-color: var(--roed); background: #fdf8f8; }

.icel-feltfejl {
    display: block;
    margin-top: var(--luft-2);
    font-size: var(--t-lille);
    font-weight: 600;
    color: var(--roed);
}

.icel-gruppe.icel-felt--fejl { border-color: var(--roed); }

/* Medlemsvalget */
.icel-valgpar {
    display: grid;
    gap: var(--luft-4);
    margin-top: var(--luft-3);
}

.icel-valg { position: relative; display: block; cursor: pointer; }

.icel-valg input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.icel-valg__krop {
    display: block;
    height: 100%;
    padding: var(--luft-5) var(--luft-5) var(--luft-5) var(--luft-8);
    border: 2px solid var(--linje);
    border-radius: var(--runding);
    background: var(--hvid);
    text-align: left;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.icel-valg__prik {
    position: absolute;
    top: var(--luft-5);
    left: var(--luft-5);
    width: 24px;
    height: 24px;
    border: 2px solid #aab5ae;
    border-radius: 50%;
    background: #fff;
    transition: border-color .15s ease;
}

.icel-valg__prik::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--gr-700);
    transform: scale(0);
    transition: transform .15s ease;
}

.icel-valg:hover .icel-valg__krop { border-color: var(--gr-600); }

.icel-valg input:checked + .icel-valg__krop {
    border-color: var(--gr-700);
    background: var(--gr-050);
    box-shadow: 0 0 0 4px rgba(29, 141, 101, .12);
}

.icel-valg input:checked + .icel-valg__krop .icel-valg__prik { border-color: var(--gr-700); }
.icel-valg input:checked + .icel-valg__krop .icel-valg__prik::after { transform: scale(1); }

.icel-valg input:focus-visible + .icel-valg__krop {
    outline: 3px solid var(--gr-600);
    outline-offset: 3px;
}

.icel-valg__krop strong {
    display: block;
    font-size: var(--t-brod);
    color: var(--gr-900);
}

.icel-valg__pris {
    display: block;
    margin: var(--luft-2) 0 var(--luft-1);
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--gr-700);
}

.icel-valg__krop small {
    display: block;
    font-size: var(--t-lille);
    color: var(--daempet);
}

.icel-forklaring {
    display: flex;
    align-items: flex-start;
    gap: var(--luft-3);
    margin-top: var(--luft-5);
    padding: var(--luft-4);
    background: var(--guld-100);
    border-radius: var(--runding);
    font-size: var(--t-lille);
    line-height: 1.6;
    color: #4d3a12;
}

.icel-forklaring svg {
    width: 20px;
    height: 20px;
    color: var(--guld);
}

.icel-felt--afkrydsning { margin: 0; }

.icel-felt--afkrydsning label {
    display: flex;
    align-items: center;
    gap: var(--luft-3);
    margin: 0;
    font-size: var(--t-brod);
    font-weight: 500;
    cursor: pointer;
}

.icel-felt--afkrydsning input {
    flex: none;
    width: 26px;
    height: 26px;
    accent-color: var(--gr-700);
    cursor: pointer;
}

.icel-opsummering {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--luft-4);
    margin-bottom: var(--luft-5);
    padding: var(--luft-5) var(--luft-6);
    background: var(--gr-900);
    border-radius: var(--runding-stor);
    color: #fff;
}

.icel-opsummering__etiket {
    font-size: var(--t-mikro);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--guld-lys);
}

.icel-opsummering__vaerdi {
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
}

.icel-opsummering__vaerdi.er-gratis { color: var(--guld-lys); }

@keyframes icel-skift {
    from { transform: translateY(6px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

.icel-opsummering__vaerdi.skifter { animation: icel-skift .22s ease; }

.icel-indsend { margin-bottom: var(--luft-3); }

.icel-smaat {
    font-size: var(--t-lille);
    line-height: 1.6;
    color: var(--daempet);
}

/* Robotfaelden skal vaere usynlig for mennesker, men ikke skjult paa en
   maade, en robot kan opdage. */
.icel-faelde {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* ===========================================================================
   9. KVITTERING
   =========================================================================== */

.icel-kvittering {
    margin-bottom: var(--luft-7);
    padding: var(--luft-7);
    background: var(--hvid);
    border: 1px solid var(--gr-100);
    border-radius: var(--runding-stor);
    box-shadow: var(--skygge);
    text-align: left;
}

.icel-kvittering__top {
    margin-bottom: var(--luft-6);
    padding-bottom: var(--luft-6);
    border-bottom: 1px solid var(--linje);
    text-align: center;
}

.icel-kvittering__maerke {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin: 0 auto var(--luft-4);
    border-radius: 50%;
    background: var(--gr-100);
    color: var(--gr-700);
}

.icel-kvittering__maerke svg { width: 36px; height: 36px; stroke-width: 2.6; }

.icel-kvittering h2 {
    margin-bottom: var(--luft-3);
    font-size: var(--t-h2);
}

.icel-kvittering__under { font-size: var(--t-stor); color: var(--daempet); }

.icel-betaling {
    margin-bottom: var(--luft-6);
    padding: var(--luft-5);
    background: var(--sand);
    border-radius: var(--runding);
    text-align: left;
}

.icel-betaling--gratis {
    display: flex;
    align-items: flex-start;
    gap: var(--luft-4);
    background: var(--gr-050);
    border: 1px solid var(--gr-100);
}

.icel-betaling__ikon {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--runding-lille);
    background: var(--gr-100);
    color: var(--gr-700);
}

.icel-betaling__ikon svg { width: 24px; height: 24px; }

.icel-betaling__hoved {
    margin-bottom: var(--luft-1);
    font-size: var(--t-stor);
    font-weight: 700;
    color: var(--gr-900);
}

.icel-betaling__hoved-linje {
    display: flex;
    align-items: center;
    gap: var(--luft-4);
    margin-bottom: var(--luft-5);
}

.icel-betaling__hoved-linje h3 { flex: 1; font-size: var(--t-h3); }

.icel-betaling__beloeb {
    font-size: var(--t-h2);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--gr-800);
}

.icel-bank {
    display: grid;
    gap: var(--luft-3);
    margin: var(--luft-4) 0 var(--luft-5);
    padding: var(--luft-5);
    background: var(--hvid);
    border: 1px solid var(--linje);
    border-radius: var(--runding);
}

.icel-bank div {
    display: flex;
    justify-content: space-between;
    gap: var(--luft-4);
    font-size: var(--t-brod);
}

.icel-bank span { color: var(--daempet); }

.icel-bank strong {
    color: var(--blaek);
    font-variant-numeric: tabular-nums;
}

.icel-betaling__krav { margin-bottom: var(--luft-3); font-weight: 600; }

.icel-reference {
    margin-bottom: var(--luft-3);
    padding: var(--luft-4) var(--luft-5);
    background: var(--guld-100);
    border: 2px dashed var(--guld);
    border-radius: var(--runding);
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: var(--t-stor);
    font-weight: 700;
    color: #4d3a12;
    text-align: center;
    overflow-wrap: anywhere;
}

.icel-kvittering__mail {
    display: flex;
    align-items: flex-start;
    gap: var(--luft-4);
    margin-bottom: var(--luft-5);
    padding: var(--luft-5);
    background: var(--gr-050);
    border-radius: var(--runding);
}

.icel-kvittering__mail svg {
    flex: none;
    width: 26px;
    height: 26px;
    margin-top: 3px;
    color: var(--gr-600);
}

.icel-kvittering__mail p + p { margin-top: var(--luft-1); }

.icel-kvittering__slut {
    font-size: var(--t-h4);
    font-weight: 600;
    color: var(--gr-800);
    text-align: center;
}


/* ===========================================================================
   10. KNAPPER OG BESKEDER
   =========================================================================== */

.icel-knap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--luft-2);
    width: 100%;
    min-height: 54px;
    padding: var(--luft-3) var(--luft-6);
    border: 0;
    border-radius: var(--runding-lille);
    background: var(--gr-700);
    color: #fff;
    font-family: inherit;
    font-size: var(--t-brod);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background .16s ease, transform .16s ease;
}

.icel-knap svg { width: 20px; height: 20px; transition: transform .16s ease; }

.icel-knap:hover,
.icel-knap:focus { background: var(--gr-800); color: #fff; }

.icel-knap:hover svg { transform: translateX(3px); }
.icel-knap:active { transform: translateY(1px); }

.icel-knap--stor {
    width: auto;
    min-height: 62px;
    padding: var(--luft-4) var(--luft-7);
    font-size: var(--t-stor);
    background: var(--guld-lys);
    color: #2e2109;
}

.icel-knap--stor:hover,
.icel-knap--stor:focus { background: #f6dda6; color: #2e2109; }

.icel-knap--lys {
    width: auto;
    background: #fff;
    color: var(--gr-900);
}

.icel-knap--lys:hover,
.icel-knap--lys:focus { background: var(--guld-100); color: var(--gr-900); }

.icel-knap--sekundaer {
    width: auto;
    background: transparent;
    border: 2px solid var(--gr-700);
    color: var(--gr-700);
}

.icel-knap--sekundaer:hover,
.icel-knap--sekundaer:focus { background: var(--gr-700); color: #fff; }

.icel-knap[disabled],
.icel-knap.sender { opacity: .6; cursor: progress; }

.icel-lukket,
.icel-fejl,
.icel-tom,
.icel-faa-pladser {
    margin-bottom: var(--luft-5);
    padding: var(--luft-4) var(--luft-5);
    border-radius: var(--runding);
    font-size: var(--t-lille);
    line-height: 1.6;
}

.icel-lukket {
    background: #eeebe5;
    color: #55503f;
    font-weight: 600;
    text-align: center;
}

.icel-fejl {
    background: #fbeaea;
    border-left: 4px solid var(--roed);
    color: var(--roed);
    font-weight: 600;
}

.icel-tom { background: var(--sand); color: var(--daempet); }

.icel-faa-pladser {
    background: var(--guld-100);
    color: #8a6320;
    font-weight: 600;
}

.icel-kursus__fod .icel-lukket { margin-bottom: 0; }


/* ===========================================================================
   11. TEMAETS EGNE DELE
   ===========================================================================
   Klassen icel-side saettes af pluginnet paa enhver side, der bruger
   koderne - ikke bundet til et side-nummer, saa den foelger med til nye
   sider af sig selv. */

body.icel-side { background: var(--sand, #f7f5f0); }

body.icel-side #main #content-wrap,
body.icel-side #primary,
body.icel-side #content {
    width: 100%;
    max-width: none;
    padding: 0;
}

body.icel-side .page-header { display: none; }

/* Sidehovedet lægges oven paa hero'en, saa billedet gaar helt til top. */
body.icel-side #site-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 40;
    background: linear-gradient(180deg, rgba(5, 39, 28, .9), rgba(5, 39, 28, 0)) !important;
    border: 0;
    box-shadow: none;
}

body.icel-side #site-header-inner {
    width: min(1180px, calc(100% - 40px));
    max-width: 1180px;
}

body.icel-side #site-navigation-wrap .dropdown-menu > li > a,
body.icel-side .oceanwp-mobile-menu-icon a {
    color: #fff;
}


/* ===========================================================================
   12. TABLET OG TELEFON
   =========================================================================== */

@media (max-width: 1080px) {
    .icel-kurser {
        --luft-9: 72px;
        --luft-8: 48px;
    }
}

@media (max-width: 760px) {
    .icel-kurser {
        /* Én skrue: al luft skrumper samlet, saa forholdene holder. */
        --luft-9: 56px;
        --luft-8: 40px;
        --luft-7: 32px;
        --luft-6: 24px;

        /* Broedteksten bliver staaende paa 18 px. Den maa ikke skrumpe -
           det er paa telefonen, folk faktisk laeser. */
        --t-h2: 28px;
        --t-h3: 23px;
        --t-h4: 20px;
        --t-stor: 18px;
    }

    .icel-hero { min-height: 480px; padding-block: 80px var(--luft-8); }

    .icel-hero__titel { font-size: clamp(34px, 11vw, 48px); }
    .icel-hero__brod { font-size: 16px; }

    .icel-hero__handling { flex-direction: column; align-items: stretch; }
    .icel-hero .icel-knap { width: 100%; }
    .icel-hero__naeste { text-align: center; }

    .icel-hero__punkter { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--luft-2); }
    .icel-punkt { padding: var(--luft-3); gap: var(--luft-2); }
    .icel-punkt__ikon { width: 36px; height: 36px; }
    .icel-punkt__ikon svg { width: 18px; height: 18px; }

    .icel-kursusliste { grid-template-columns: 1fr; gap: var(--luft-4); }
    .icel-indeholder { grid-template-columns: 1fr; gap: var(--luft-4); padding: var(--luft-5); }

    .icel-gruppe { padding: var(--luft-5); }
    .icel-gruppe legend { font-size: var(--t-h4); }

    .icel-valg__krop { padding: var(--luft-4) var(--luft-4) var(--luft-4) var(--luft-7); }
    .icel-valg__prik { top: var(--luft-4); left: var(--luft-4); }

    .icel-opsummering { justify-content: center; text-align: center; }
    .icel-indsend .icel-knap { width: 100%; }

    .icel-konto { grid-template-columns: 1fr; }
    .icel-konto__tal { font-size: var(--t-h3); }

    .icel-kvittering { padding: var(--luft-5); }
    .icel-bank div { flex-direction: column; gap: var(--luft-1); }

    .icel-sammenlign { grid-template-columns: 1fr; }
}

@media (min-width: 620px) {
    .icel-raekke { grid-template-columns: 1fr 1fr; }
    .icel-raekke .icel-felt--lille { max-width: 180px; }
    .icel-valgpar { grid-template-columns: 1fr 1fr; }
    .icel-indsend .icel-knap { width: auto; min-width: 260px; }
}

/* Har brugeren slaaet bevaegelse fra i sit styresystem, respekteres det. */
@media (prefers-reduced-motion: reduce) {
    .icel-kurser *,
    .icel-kurser *::before,
    .icel-kurser *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}