footer{
  background: var(--footer-bg);
  color: var(--footer-fg);
  border-top: none;

}
footer img{
  display:block;
  margin:0 auto;
  max-width:min(100%,220px);
  height:auto;
  border-radius:8px;
  outline:1px solid var(--footer-border-soft);
}

.footer-text {
  text-align: center;
 
  font-size: 14px;
}


.ss-namespace {
  
  --ss-text: whitesmoke;
  --ss-muted: rgba(255,255,255,0.85);

  --ss-yellow: #ffd400;
  --ss-pink: #ff66cc;
  --ss-purple: #7f57ff;
  --ss-blue: #2b6bff;
  --ss-red: #ff3b3b;
  --ss-orange: #ff8a00;
  --ss-green: #23c552;


  text-align: center;
}

.ss-namespace h1,
.ss-namespace h2 {
  color: var(--ss-text);
  margin: 0.5rem 0 0.75rem;
  letter-spacing: 0.02em;
}

.ss-namespace h1 { font-size: clamp(1.6rem, 2.5vw, 2.4rem); }
.ss-namespace h2 { font-size: clamp(1.2rem, 2vw, 1.6rem); }

.ss-namespace p {
  color: var(--ss-text);
  margin: 0.5rem auto;
  max-width: 70ch;
  line-height: 1.55;



    color: var(  --Chrysler-blue);  
    color: var(--Emerald); 
    color: var( --Bittersweet); 
    color: var( --Blue-gray); 
         /* color: var( --Eerie-black); */
    color: var(--Mustard); 
    color: var(--Tangerine); 
    color: var(--Persian-red); 
    color: var(--White);  


.yellow { color: #f6d046;}
.pink   { color: #FF69B4; }
.purple { color: #9510E0; }
.blue   { color: #57a0f2;} 
.red    { color: #d33b31; }
.orange { color: #ef8a17;}
.green  { color: #6ec97b; } 
.white  { color: #ffffff; }
.black  { color: #1e2024; }
}

.ss-namespace .linje {
  height: 2px;
  background: var(--ss-text);
  opacity: 0.9;
  width: min(100%, 900px);
  margin: 1.5rem auto 2rem;
  border-radius: 1px;
}


.ss-namespace footer p {
 
  margin: 0.35rem auto;
  max-width: 80ch;
}


.ss-namespace footer img {
  display: block;
  margin: 1rem auto 0;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}



.a1 {
  text-align: left;
 
  margin-bottom: 30px; 
  font-size: 16px;
  
  text-align-last: center; 
}
 .a1 .p1 {
  text-align: left;
 
  margin-bottom: 30px; 
  font-size: 16px;
 
}

.a1 .ul1 {
  
  margin-bottom: 30px; 
  font-size: 16px;

  list-style-position: inside; 
  margin-left: 0;              
  padding-left: 0;            
}
.a1 .ul  li {
  margin-left: -10px; 
  margin-bottom:.5rem; 
}

.a2 {
   text-align: center;
  padding-left: 2px;
  text-align: center;

  margin-bottom: 30px; 
  font-size: 16px;

  text-align-last: center; 
}



.linje {
  
  height: 3px;
  background-color: whitesmoke;
  width: 50%;
 
  border-radius: 1px;
  margin: 3px auto;
  
}

.s1 {
 
  margin-bottom: 30px; 
  font-size: 16px;
  text-align: center;
 text-align-last: center;
}


/* ========== Artikel-layout ========== */
   .article {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    position: relative;


  }



.article > article{
  text-align:left;
      flex:1 1 0;
    padding:0 32px;
}

.colored-dots {
  order: 1;                 /* hamnar mellan de två artiklarna */
  display: flex;
  gap: 10px;
  justify-content: center;
  align-self: center;
  padding: 0 32px;
  margin: 8px 0 12px;
  position: static;         /* viktigt på mobil */
  transform: none;
}

 

  .colored-dots .dot{

 order:1; width:10px; height:10px; border-radius:50%;
}

.colored-dots .yellow { background: #f6d046; }
.colored-dots .pink   { background: #FF69B4; }
.colored-dots .purple { background: #9510E0; }
.colored-dots .blue   { background: #57a0f2; }
.colored-dots .red    { background: #d33b31; }
.colored-dots .orange { background: #ef8a17; }
.colored-dots .green  { background: #6ec97b; }


@media (max-width: 520px) {
  .ss-namespace p { padding: 0 1rem; }
  .ss-namespace .linje { width: 85%; }
}

@media (min-width:768px){

  .article{ position:relative; display:flex; flex-direction:row; gap:60px; }
  .article > article{ flex:1 1 0; padding:0 32px; position:relative; z-index:1; }

  .article::before{
    content:"";
    position:absolute; left:50%; top:0; bottom:0;
    width:2px; height: 95%; background:rgba(255,255,255,.15);
    transform:translateX(-0.5px); z-index:0;
  }
 

  .article {
    display: flex;
    flex-direction: row; 
    justify-content: center;
    align-items: flex-start;
    gap: 64px;
    position: relative;
     justify-content: space-between; 
  }

    .colored-dots{
    order: -1;                 /* före kolumnerna */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -22px;  
    padding: 0;              /* justera höjd här */
    margin: 0;
  }
  .colored-dots .dot{

 order: -1; width:10px; height:10px; border-radius:50%; position: relative; top: -60px;
}
}