:root{
  --bg:#f8f5f5;
  --text:#14151f;
  --muted:#6d7280;

  --primary:#b11226;
  --primary-dark:#E30613;
  --primary-bright:#b62a30;

  --border:#e7e7ee;
  --soft:#f2f2f2;

  --green:#16a34a;
  --orange:#f97316;
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:Inter,system-ui,sans-serif;

  background:radial-gradient(circle at top left, rgba(0, 51, 51, 0.10), transparent 34%), linear-gradient(180deg, #fff, #f6f6f8 340px);

  color:var(--text);
  line-height:1.5;
}

a{
  color:inherit;
  text-decoration:none;
}

.wrap{
  width:min(980px,calc(100% - 28px));
  margin:0 auto;
}

/* HEADER */

header{
  position:sticky;
  top:0;
  z-index:100;

  overflow:visible;

  background:rgba(255,255,255,.96);

  border-bottom:1px solid var(--border);

  backdrop-filter:blur(18px);
}

.topbar{
  min-height:44px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:18px;
}

.logo{
  display:block;
  line-height:0;
}

/* BADGE */

.logo-badge{
  display:block;

  width:64px;
  height:auto;

  position:relative;

  margin-bottom:-55px;

  z-index:20;

  filter:
    drop-shadow(0 12px 18px rgba(0,0,0,.12))
    drop-shadow(0 24px 34px rgba(0,0,0,.14));

  transition:220ms ease;
}

.logo:hover .logo-badge{
  transform:translateY(2px) scale(1.03);
}

.section-label{
  color:var(--muted);

  font-size:.92rem;
  font-weight:850;

  letter-spacing:.05em;
}

/* HERO */

.hero{
  padding:50px 0 26px;
}

h1{
  max-width:780px;

  margin:14px 0 10px;

  font-size:clamp(2.1rem,7vw,4.8rem);

  line-height:.94;
  letter-spacing:-.075em;
}

.lead{
  max-width:690px;

  margin:0;

  color:var(--muted);

  font-size:1.08rem;
}

/* TOOLBAR */

.toolbar{
  position:sticky;
  top:72px;

  z-index:9;

  display:grid;
  grid-template-columns:1fr auto;

  gap:12px;
  align-items:center;

  margin:28px 0 16px;
  padding:10px;

  background:rgba(255,255,255,.9);

  border:1px solid var(--border);
  border-radius:24px;

  backdrop-filter:blur(16px);

  box-shadow:
    0 14px 34px rgba(0,0,0,.055);
}

.search{
  min-height:48px;

  display:flex;
  align-items:center;
  gap:10px;

  padding:0 14px;

  border-radius:999px;

  background:var(--soft);
}

.search input{
  width:100%;

  border:0;
  outline:0;

  background:transparent;

  font-size:1rem;
}

.tabs{
  display:flex;
  gap:8px;
}

.tab{
  min-height:40px;
cursor: pointer;
  display:inline-flex;
  align-items:center;

  padding:0 13px;

  border-radius:999px;

  background:#fff;

  border:1px solid var(--border);

  color:var(--muted);

  font-size:.9rem;
  font-weight:900;
}

.tab.active{
  background:var(--text);
  border-color:var(--text);
  color:#fff;
}

/* SUMMARY */

.summary{
  display:flex;
  justify-content:space-between;

  gap:16px;

  margin:0 0 12px;

  color:var(--muted);

  font-size:.94rem;
}

.summary strong{
  color:var(--text);
}

/* LIST */

.list{
  display:grid;
  gap:14px;

  padding-bottom:48px;
}

.item{
  position:relative;

  display:grid;
  grid-template-columns:58px 1fr auto;

  gap:16px;
  align-items:center;

  padding:18px;

  background:rgba(255,255,255,.92);

  border:1px solid var(--border);
  border-radius:28px;

  box-shadow:
    0 10px 26px rgba(0,0,0,.045);

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.item:hover{
  transform:translateY(-2px);

  border-color:rgba(0,0,0,.28);

  box-shadow:
    0 16px 36px rgba(0,0,0,.055);
}

/* VISITED */

.item:visited{
  background: var(--soft);
}

.item:visited .btn{
  background:var(--soft) !important;
  color:#505050;
  box-shadow:inital;
}



.item:visited h2{
color: var(--muted);
}


/* CONTENT */

.rank{
  width:54px;
  height:54px;

  display:grid;
  place-items:center;

align-self: start;

  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      var(--primary-dark),
      var(--primary-bright)
    );

  color:#fff;

  font-weight:950;

  box-shadow:
    0 8px 18px rgba(0,0,0,.10);
}

.content h2{
  display:inline;

  margin:0;

  font-size:1.08rem;
}

.badge{
  display:inline-flex;

  margin-left:10px;

  padding:4px 8px;

  border-radius:999px;

  background:rgba(177,18,38,.08);

  color:var(--primary);

  font-size:.73rem;
  font-weight:950;
}

.badge.green{
  background:#eaf8ef;
  color:var(--green);
}

.badge.orange{
  background:#fff3e8;
  color:var(--orange);
}

.desc{
  margin:7px 0 0;

  color:var(--muted);
}

.meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px;

  margin-top:10px;

  color:var(--muted);

  font-size:.83rem;
  font-weight:800;
}

.meta span,
.date-badge{
  padding:5px 8px;
}

.meta span{
  border-radius:999px;

  background:var(--soft);
}

/* SIDE */

.side{
  display:grid;
  gap:8px;

  justify-items:end;
}

.date-badge{
  color:var(--muted);

  font-size:.82rem;
  font-weight:850;
}

/* BUTTON */

.btn{
  min-height:42px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:0 16px;

  border-radius:999px;

  background:var(--primary-bright);

  color:#fff;

  font-weight:950;

  box-shadow:
    0 6px 14px rgba(0,0,0,.08);


}

.item:hover .btn{
  background:var(--primary-dark);
}

/* FOOTER */

footer{
  padding:24px 0 42px;

  border-top:1px solid var(--border);

  color:var(--muted);

  font-size:.92rem;
}

.foot{
  display:flex;
  justify-content:space-between;

  gap:18px;

  flex-wrap:wrap;
}

.ad::before {
  content: "Anzeige";
  display: block;
  margin-bottom: 4px;
  color: #9ca3af;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


.disclaimer {
  padding: 18px 20px;
  border-top: 1px solid var(--border);

  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.65;
}

.disclaimer p {
  margin: 0 0 10px;
}

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

.pt50{
	padding-top: 50px;
}
/* MOBILE */

@media (max-width:760px){
	
	.rank{ display:none}
		
  .toolbar{
    grid-template-columns:1fr;
  }

  .item{
    grid-template-columns:1fr;
  }

  .side{
    justify-items:stretch;
  }

  .btn{
    width:100%;
  }


  .logo-badge{
    width:56px;
  }

}




/* VERTICALS */

.vertical-grid{
  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

  gap:14px;

  margin:28px 0 48px;
  padding:0;

  list-style:none;
}

.vertical-grid li{
  margin:0;
}

.vertical-card{
  min-height:120px;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:12px;

  padding:20px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.96),
      rgba(255,255,255,.88)
    );

  border:1px solid var(--border);
  border-radius:28px;

  box-shadow:
    0 10px 26px rgba(0,0,0,.045);

  font-size:1.08rem;
  font-weight:900;

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.vertical-card:hover{
  transform:translateY(-3px);

  border-color:rgba(0,0,0,.22);

  box-shadow:
    0 16px 36px rgba(0,0,0,.06);
}



.vertical-card{
  min-height:120px;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:12px;

  padding:20px;
}

/* ICON */

.vertical-card span{
  font-size:1.8rem;
  line-height:1;
}

/* MOBILE */

@media (max-width:760px){

  .vertical-grid{
    grid-template-columns:1fr;
  }

  .vertical-card{
    min-height:auto;

    flex-direction:row;
    align-items:center;
    justify-content:flex-start;

    gap:14px;

    padding:18px;

    font-size:1rem;

    text-align:left;
  }

  .vertical-card span{
    flex-shrink:0;

    font-size:1.35rem;
  }

}


/* RANKING */

.ranking-section{
  padding-bottom:48px;
}

.ranking-list{
  list-style:none;
  counter-reset:ranking;

  display:grid;
  gap:18px;

  margin:0;
  padding:0;
}

.ranking-item{
  counter-increment:ranking;
}

.ranking-card{
  display:grid;
  grid-template-columns:54px 1fr;

  gap:16px;
  align-items:start;

  padding:18px;

  background:rgba(255,255,255,.94);

  border:1px solid var(--border);
  border-radius:28px;

  box-shadow:
    0 14px 34px rgba(0,0,0,.06);

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.ranking-card:hover{
  transform:translateY(-3px);

  border-color:rgba(0,0,0,.2);

  box-shadow:
    0 18px 42px rgba(0,0,0,.08);
}

/* NUMBER */

.ranking-number{
  width:46px;
  height:46px;

  display:grid;
  place-items:center;

  margin-top:2px;

  border-radius:15px;

  background:
    linear-gradient(
      135deg,
      var(--primary-dark),
      var(--primary-bright)
    );

  color:#fff;

  font-size:.9rem;
  font-weight:950;

  box-shadow:
    0 10px 22px rgba(177,18,38,.22);
}

.ranking-number::before{
  content:"#"
    counter(ranking);
}

/* CONTENT */

.ranking-content{
  min-width:0;
}

.ranking-content h2{
  margin:0 0 12px;

  color:var(--text);

font-size: 2rem;
  letter-spacing:-.035em;
}

.ranking-image-wrap{
  position:relative;

  margin-bottom:14px;
}

.ranking-image{
  width:100%;
  height:600px;

  display:block;

  object-fit:cover;

  border-radius:18px;

  background:var(--soft);
}

.ranking-image-credit{
  position:absolute;
  right:10px;
  bottom:10px;

  max-width:calc(100% - 20px);

  padding:5px 8px;

  border-radius:999px;

  background:rgba(255,255,255,.62);

  backdrop-filter:blur(10px);

  color:#000;

  font-size:.68rem;
  line-height:1;
}

.ranking-desc{
  margin:0;

  color:var(--muted);

  font-size:.98rem;
  line-height:1.65;
}

.ranking-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px;

  margin-top:14px;
}

.ranking-meta span{
  padding:5px 10px;

  border-radius:999px;

  background:var(--soft);

  color:var(--muted);

  font-size:.8rem;
  font-weight:850;
}



/* MOBILE */

@media (max-width:760px){

  .ranking-list{
    gap:16px;
  }

  .ranking-card{
    grid-template-columns:44px 1fr;

    gap:12px;

    padding:14px;

    border-radius:24px;
  }

  .ranking-number{
    width:40px;
    height:40px;

    border-radius:13px;

    font-size:.82rem;
  }

  .ranking-content h2{
    margin-bottom:10px;

    font-size: 1.8rem;
  }

  .ranking-image{
    height:190px;

    border-radius:16px;
  }

  .ranking-desc{
    font-size:.94rem;
    line-height:1.6;
  }

  .ranking-image-credit{
    right:8px;
    bottom:8px;

    font-size:.62rem;
  }

}