* {
	
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: "Poppins", sans-serif;

}

html, body {

	width: 100%;
	min-height:100%;
	
}

#header-bg {
	
	background-repeat:no-repeat;
	background-repeat: no-repeat;
	background-color: #ffffff;
	background-attachment: fixed;
	background-position: top center;
	background-size: cover;
	position: relative;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	z-index: 99;

}

img {
	
	width: 100%;
	height: auto;

}
 
section {
	
	height: 100vh;
	width: 100%;
	display: grid;
	place-items: center;

}

.row {

	display: flex;
	flex-wrap: wrap;

}

.row_fb {
	
	display: flex;
	flex-wrap: wrap;           /* Spalten umbrechen bei kleineren Bildschirmen */
	justify-content: space-between;
	gap: 1em;                  /* Abstand zwischen Spalten */

}

.column {

	width: 100%;
	padding: 0 1em 1em 1em;
	text-align: center;

}

.column_fb {
	
	flex: 1 1 48%;             /* Zwei Spalten nebeneinander, 48% Breite */
	padding: 0.5em;
	box-sizing: border-box;
	text-align: center;

}

.card > * + * {
  margin-top: 1rem;
}

.card p {
  margin-bottom: 0.8em;
}

.special-event-box,
.next-race-box,
.results-box,
.ssrl-links-box {
  margin-top: 1.2em;
}

.card {
	
	width: 100%;
	height: 100%;
	padding: 2em 1.5em;
	background: linear-gradient(#ffffff 50%, #FE0002 50%);
	background-size: 100% 200%;
	background-position: 0 2.5%;
	border-radius: 5px;
	box-shadow: 0 0 35px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	transition: 0.5s;

}

.card_img {
	
	width: 100%;
	height: 100%;
	padding: 2em 1.5em;
	background: linear-gradient(#ffffff 50%, #ffffff 50%);
	background-size: 100% 200%;
	background-position: 0 2.5%;
	border-radius: 5px;
	box-shadow: 0 0 35px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	transition: 0.5s;

}

.card_fb {
	
	width: 100%;
	height: 100%;
	padding: 1em 0.5em;
	background: linear-gradient(#ffffff 50%, #FE0002 50%);
	background-size: 100% 200%;
	background-position: 0 2.5%;
	border-radius: 5px;
	box-shadow: 0 0 35px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	transition: 0.5s;

}

.card:hover {
	
	background-position: 0 100%;

}

.card:hover .icon-wrapper {
	
	background-color: #ffffff;
	color: #FE0002;

}

.card:hover h3 {
	
	color: #ffffff;

}

.card:hover p {
	
	color: #ffffff;

}

.card:hover .info-box {
	
	background: linear-gradient(145deg, #f8f8f8, #eeeeee);
	border: 1px solid rgba(0,0,0,0.08);

}

.card:hover .info-box h3 {

	color: #1f194c;

}

.card:hover .info-box p {
	
	color: #333333;

}

.card:hover .info-box a {
	
	color: #b30000;

}

.card:hover .info-item + .info-item {
	
	border-top: 1px solid rgba(0,0,0,0.08);
}

h1 {
	
	font-size: 16px;
	font-weight: 600;
	color: #1f194c;
	margin: 1em 0;
	
}
h2 {
	
	font-size: 18px;
	font-weight: 600;
	color: #1f194c;
	margin: 1em 0;

}

h3 {
	
	font-size: 20px;
	font-weight: 600;
	color: #1f194c;
	margin: 1em 0;

}

p {
	
	color: #000000;
	font-size: 15px;
	line-height: 1.6;
	letter-spacing: 0.03em;

}

.icon-wrapper {
	
	background-color: #FE0002;
	position: relative;
	margin: auto;
	font-size: 30px;
	height: 2.5em;
	width: 2.5em;
	color: #ffffff;
	border-radius: 50%;
	display: grid;
	place-items: center;
	transition: 0.5s;

}

.fb-container {
  
	max-width: 100%;
	margin: 0 auto;     /* zentriert den Feed */
	display: block;

}

.fb-page,
.fb-page iframe,
.fb-page span,
.fb-page span iframe {
	
	width: 100% !important;
	min-height: 700px !important;
	display: block !important;
	
}

@media (max-width: 768px) {
  .column_fb {
    flex: 1 1 100%;           /* untereinander */
  }
  .fb-container {
    transform: scale(0.7);    /* kleiner auf Mobil */
  }
}

@media screen and (min-width: 768px) {
	
	section {

		padding: 0 2em;

	}
	
	.column {

		flex: 0 50%;
		max-width: 50%;

	}

}

@media screen and (min-width: 992px) {
	
	section {
		
		padding: 1em 3em;
	
	}
	
	.column {
		
		flex: 0 0 33.33%;
		max-width: 33.33%;

	}

}

a.button{
	
	display:inline-block;
	padding:0.3em 1.2em;
	margin:0 0.1em 0.1em 0;
	border:0.16em solid rgba(255,255,255,0);
	border-radius:0.2em;
	box-sizing: border-box;
	text-decoration:none;
	font-family:'Roboto',sans-serif;
	font-weight:300;
	color:#FFFFFF;
	text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
	text-align:center;
	transition: all 0.2s;

}

a.button:hover{
	
	border-color: rgba(255,255,255,1);

}
@media all and (max-width:30em){
	
	a.button{
	
		display:block;
		margin:0.2em auto;
	
	}

}

.footer-content{
	
	display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;

}

.footer-content-p {
	
	color: red !important;
	font-weight: 400 !important;

}

details {

	background: #eee; 
	border: 1px solid #666; 
	border-radius: 3px; 
	margin-bottom: 1.5rem;

}
summary {
	
	background: #666; 
	font-size: 14px;
	color: #fff; 
	cursor: pointer; 
	padding: 3px 3px 3px 3px;

}

.akkordeon-inhalt {
	
	font-size: 12px;
	text-align: justify;
	padding: 3px 3px 3px 3px;

}

.akkordeon-inhalt ul {
	
	list-style-position: inside;
	padding-left: 0;
	
}

.roter-text {
	color: red; 
	background-color: white;
}

/* Der verzögerungseffekt */
details[open] summary ~ * {
	
	animation: sweep .7s ease-in-out;
}

@keyframes sweep {
  0%    {opacity: 0; margin-left: -20px}
  100%  {opacity: 1; margin-left: 0px}
}

.special-event-box {
  margin-top: 1.2em;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(145deg, #214a36, #183528);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 8px 20px rgba(0,0,0,0.20);
  text-align: left;
}

.special-event-image {
  position: relative;
  width: 100%;
  height: 145px;
  overflow: hidden;
}

.special-event-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.52);
}

.special-event-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.18) 100%);
  padding: 14px 16px;
  color: #ffffff;
}

.special-event-overlay span {
  display: inline-block;
  padding: 3px 9px;
  margin-bottom: 6px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  color: #f2c300;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.special-event-overlay h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.05;
  color: #ffffff;
  text-transform: uppercase;
}

.special-event-overlay h4 {
  margin: 6px 0 0;
  font-size: 14px;
  color: #f2c300;
  text-transform: uppercase;
}

.special-event-content {
  position: relative;
  padding: 16px 12px 6px;
}

.special-event-content::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: 2px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.08), #f2c300, rgba(255,255,255,0.08));
  transform: translateX(-50%);
  border-radius: 10px;
}

.timeline-item {
  position: relative;
  width: 50%;
  margin-bottom: 12px;
}

.timeline-item.left {
  padding-right: 18px;
  text-align: right;
}

.timeline-item.right {
  margin-left: 50%;
  padding-left: 18px;
  text-align: left;
}

.timeline-item::before {
  content: "";
  position: absolute;
  top: 16px;
  width: 10px;
  height: 10px;
  background: #f2c300;
  border: 2px solid #183528;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(242, 195, 0, 0.22);
  z-index: 2;
}

.timeline-item.left::before {
  right: -5px;
}

.timeline-item.right::before {
  left: -5px;
}

.timeline-card {
  display: inline-block;
  max-width: 220px;
  width: 100%;
  padding: 10px 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(0,0,0,0.16);
}

.timeline-label {
  display: inline-block;
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 800;
  color: #f2c300;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.timeline-card h5 {
  margin: 0 0 3px;
  font-size: 15px;
  color: #ffffff;
}

.timeline-card p {
  margin: 0;
  color: rgba(255,255,255,0.88);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.special-event-footer {
  display: flex;
  gap: 12px;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.12);
}

.special-event-footer-col {
  flex: 1 1 50%;
}

.special-event-footer h5 {
  margin: 0 0 6px;
  font-size: 11px;
  color: #f2c300;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.special-event-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.special-event-footer li {
  margin: 0 0 3px;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255,255,255,0.94);
}

.special-event-footer li span {
  color: #f2c300;
  font-weight: 700;
}

.special-event-footer p {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255,255,255,0.90);
}

@media all and (max-width:48em) {
  .special-event-image {
    height: 135px;
  }

  .special-event-overlay {
    padding: 12px 14px;
  }

  .special-event-overlay h2 {
    font-size: 20px;
  }

  .special-event-overlay h4 {
    font-size: 13px;
  }

  .special-event-content {
    padding: 14px 10px 4px;
  }

  .special-event-content::before {
    left: 8px;
    transform: none;
  }

  .timeline-item,
  .timeline-item.left,
  .timeline-item.right {
    width: 100%;
    margin-left: 0;
    padding-left: 22px;
    padding-right: 0;
    text-align: left;
  }

  .timeline-item.left::before,
  .timeline-item.right::before {
    left: 3px;
    right: auto;
  }

  .timeline-card {
    max-width: 100%;
  }

  .special-event-footer p {
	margin: 0;
	font-size: 11px;
	line-height: 1.5;
	color: rgba(255,255,255,0.92);
  }

  .special-event-footer p span {
	color: #f2c300;
	font-weight: 700;
  }

}

.next-race-box {
  margin: 1em 0 1.4em;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(145deg, #3a0d0f, #1f1f1f);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 8px 18px rgba(0,0,0,0.14);
  text-align: left;
}

.next-race-image {
  position: relative;
  width: 100%;
  height: 150px;
  overflow: hidden;
}

.next-race-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.56);
}

.next-race-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 14px 16px;
  background: linear-gradient(90deg, rgba(0,0,0,0.52) 0%, rgba(58,13,15,0.18) 100%);
  color: #ffffff;
}

.next-race-badge {
  display: inline-block;
  padding: 0.25em 0.7em;
  margin-bottom: 0.5em;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  color: #ffcc00;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.next-race-overlay h4 {
  margin: 0 0 0.2em;
  font-size: 1.2rem;
  color: #ffffff;
  text-transform: uppercase;
}

.next-race-overlay p {
  margin: 0;
  color: #ffcc00;
  font-size: 0.95rem;
  font-weight: 600;
}

.next-race-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7em;
  margin: 0.9em;
}

.next-race-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 78px;
  padding: 0.75em 0.8em;
  border-radius: 10px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 4px 10px rgba(0,0,0,0.10);
}

.next-race-item span {
  display: block;
  margin-bottom: 0.25em;
  font-size: 0.72rem;
  color: #ffcc00;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.next-race-item strong {
  display: block;
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.35;
}

.next-race-note {
  margin: 0 0.9em 0.9em;
  padding: 0.8em;
  border-left: 4px solid #ffcc00;
  border-radius: 8px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.10);
}

.next-race-note span {
  display: block;
  margin-bottom: 0.3em;
  font-size: 0.72rem;
  color: #ffcc00;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.next-race-note p {
  margin: 0;
  color: #ffffff;
  font-size: 0.9rem;
  line-height: 1.45;
}

.next-race-schedule {
  display: flex;
  gap: 0.8em;
  padding: 0 0.9em 0.9em;
}

.next-race-schedule-col {
  flex: 1 1 50%;
  padding: 0.8em;
  border-radius: 10px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.next-race-schedule-col h5 {
  margin: 0 0 0.4em;
  font-size: 0.85rem;
  color: #ffcc00;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.next-race-schedule-col p {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.94);
  line-height: 1.45;
}

@media all and (max-width:48em) {
  .next-race-image {
    height: 130px;
  }

  .next-race-overlay h4 {
    font-size: 1.05rem;
  }

  .next-race-overlay p {
    font-size: 0.85rem;
  }

  .next-race-grid {
    grid-template-columns: 1fr;
  }

  .next-race-schedule {
    flex-direction: column;
  }
}

.results-box {
  margin: 1em 0 1.4em;
  padding: 0.9em;
  border-radius: 12px;
  background: linear-gradient(145deg, #3a0d0f, #1f1f1f);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 8px 18px rgba(0,0,0,0.14);
  text-align: left;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9em;
}

.result-card {
  padding: 0.9em;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.result-card-header {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-bottom: 0.8em;
  padding-bottom: 0.65em;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.result-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #ffcc00, #d4a800);
  color: #1f1f1f;
  font-size: 1rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.14);
}

.result-title-wrap {
  min-width: 0;
}

.result-badge {
  display: inline-block;
  padding: 0.2em 0.6em;
  margin-bottom: 0.35em;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  color: #ffcc00;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.result-card-header h4 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
  color: #ffffff;
}

.result-podium {
  margin-bottom: 0.8em;
}

.result-podium .rank {
  margin: 0 0 0.45em;
  padding: 0.55em 0.7em;
  border-radius: 8px;
  font-size: 0.88rem;
  line-height: 1.35;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.06);
}

.result-podium .rank span {
  opacity: 0.92;
}

.rank-1 {
  background: rgba(255, 215, 0, 0.16);
  border-left: 4px solid #ffd700;
}

.rank-2 {
  background: rgba(192, 192, 192, 0.16);
  border-left: 4px solid #c0c0c0;
}

.rank-3 {
  background: rgba(205, 127, 50, 0.16);
  border-left: 4px solid #cd7f32;
}

.result-link {
  padding-top: 0.2em;
}

.result-link a {
  display: inline-block;
  color: #ffcc00;
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 700;
}

.result-link a:hover {
  text-decoration: underline;
}

@media all and (max-width:48em) {
  .results-grid {
    grid-template-columns: 1fr;
  }

  .result-card {
    padding: 0.8em;
  }

  .result-card-header h4 {
    font-size: 0.95rem;
  }

  .result-podium .rank {
    font-size: 0.84rem;
  }
}

.ssrl-links-box {
  margin-top: 1em;
  padding: 1em;
  border-radius: 12px;
  background: linear-gradient(145deg, #f7f7f7, #ececec);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
  text-align: center;
}

.ssrl-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6em;
  margin-bottom: 0.9em;
}

.ssrl-links a {
  display: inline-block;
  padding: 0.45em 0.85em;
  border-radius: 999px;
  background: rgba(254, 0, 2, 0.08);
  border: 1px solid rgba(254, 0, 2, 0.18);
  color: #1f194c;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
  transition: all 0.2s ease;
}

.ssrl-links a:hover {
  background: #FE0002;
  border-color: #FE0002;
  color: #ffffff;
}

.ssrl-contact {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  margin-bottom: 0.9em;
}

.ssrl-contact span {
  font-size: 0.72rem;
  line-height: 1.45;
  color: #333333;
}

.ssrl-donate a {
  display: inline-block;
  padding: 0.5em 1em;
  border-radius: 999px;
  background: #ffcc00;
  color: #1f1f1f;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 800;
}

.ssrl-donate a:hover {
  background: #ffd633;
}

.info-box {
  margin-top: 1em;
  padding: 1em;
  border-radius: 12px;
  background: linear-gradient(145deg, #f8f8f8, #eeeeee);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
  text-align: left;
}

.info-item + .info-item {
  margin-top: 1em;
  padding-top: 1em;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.info-box h3 {
  margin: 0 0 0.4em;
  font-size: 1rem;
  color: #1f194c;
}

.info-box p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #333333;
}

.info-box a {
  color: #b30000;
  text-decoration: none;
}

.info-box a:hover {
  text-decoration: underline;
}

.archive-box {
  margin-top: 1em;
  padding: 1em;
  border-radius: 12px;
  background: linear-gradient(145deg, #f8f8f8, #eeeeee);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
  text-align: left;
}

.archive-box h2 {
  margin: 0 0 0.8em;
  font-size: 1.1rem;
  color: #1f194c;
}

.archive-box details {
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  margin-bottom: 0.8rem;
  overflow: hidden;
}

.archive-box > details {
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  margin-bottom: 1em;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.archive-box summary {
  cursor: pointer;
  list-style: none;
}

.archive-box summary::-webkit-details-marker {
  display: none;
}

.archive-box summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.55em;
  color: #ffcc00;
  transition: transform 0.2s ease;
}

.archive-box details[open] > summary::before {
  transform: rotate(90deg);
}

.archive-box > details > summary {
  background: linear-gradient(90deg, #3a0d0f, #1f1f1f);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.8em 1em;
  border-radius: 10px;
}

.archive-box details details {
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  margin: 0.7em;
  overflow: hidden;
}

.archive-box details details > summary {
  background: linear-gradient(90deg, #565656, #3f3f3f);
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.65em 0.8em;
}

.archive-box .akkordeon-inhalt {
  padding: 0.8em;
  font-size: 0.84rem;
  text-align: left;
}

.archive-box .akkordeon-inhalt p {
  margin-bottom: 0.45em;
}

.archive-box .akkordeon-inhalt a {
  color: #b30000;
  text-decoration: none;
}

.archive-box .akkordeon-inhalt a:hover {
  text-decoration: underline;
}

.archive-rank-1,
.archive-rank-2,
.archive-rank-3 {
  margin: 0 0 0.45em;
  padding: 0.55em 0.7em;
  border-radius: 8px;
  font-size: 0.88rem;
  line-height: 1.35;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.06);
}

.archive-rank-1 {
  background: rgba(255, 215, 0, 0.16);
  border-left: 4px solid #ffd700;
}

.archive-rank-2 {
  background: rgba(192, 192, 192, 0.16);
  border-left: 4px solid #c0c0c0;
}

.archive-rank-3 {
  background: rgba(205, 127, 50, 0.16);
  border-left: 4px solid #cd7f32;
}

@media all and (max-width:48em) {
  .archive-box {
    padding: 0.9em;
  }

  .archive-box h2 {
    font-size: 1rem;
  }

  .archive-box > details > summary {
    font-size: 0.92rem;
    padding: 0.75em 0.85em;
  }

  .archive-box details details > summary {
    font-size: 0.84rem;
    padding: 0.6em 0.75em;
  }

  .archive-box .akkordeon-inhalt {
    font-size: 0.8rem;
  }

  .archive-rank-1,
  .archive-rank-2,
  .archive-rank-3 {
    font-size: 0.84rem;
  }
}

.rules-box {
  margin-top: 1em;
  padding: 1em;
  border-radius: 12px;
  background: linear-gradient(145deg, #f8f8f8, #eeeeee);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
  text-align: left;
}

.rules-box h2 {
  margin: 0 0 0.8em;
  font-size: 1.1rem;
  color: #1f194c;
}

.rules-box + .rules-box {
  margin-top: 1.2em;
}

.rules-box details {
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  margin-bottom: 0.8rem;
  overflow: hidden;
}

.rules-box summary {
  background: linear-gradient(90deg, #3a0d0f, #2a2a2a);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.7em 0.85em;
  list-style: none;
}

.rules-box summary::-webkit-details-marker {
  display: none;
}

.rules-box summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.55em;
  color: #ffcc00;
  transition: transform 0.2s ease;
}

.rules-box details[open] > summary::before {
  transform: rotate(90deg);
}

.rules-box .akkordeon-inhalt {
  padding: 0.9em;
  font-size: 0.9rem;
  text-align: left;
}

.rules-box .akkordeon-inhalt p {
  margin: 0 0 0.75em;
  color: #333333;
  line-height: 1.6;
}

.rules-box .akkordeon-inhalt p:last-child {
  margin-bottom: 0;
}

.rules-box .akkordeon-inhalt a {
  color: #b30000;
  text-decoration: none;
}

.rules-box .akkordeon-inhalt a:hover {
  text-decoration: underline;
}

.rules-box .akkordeon-inhalt ul {
  margin: 0.4em 0 0.9em 1.2em;
  padding: 0;
}

.rules-box .akkordeon-inhalt li {
  margin-bottom: 0.45em;
  color: #333333;
  line-height: 1.55;
}

.rules-box .akkordeon-inhalt strong {
  color: #1f194c;
}

.rules-note {
  margin: 0.8em 0;
  padding: 0.75em 0.85em;
  border-left: 4px solid #ffcc00;
  border-radius: 8px;
  background: rgba(255,255,255,0.72);
}

.rules-warning {
  margin: 0.8em 0;
  padding: 0.75em 0.85em;
  border-left: 4px solid #b30000;
  border-radius: 8px;
  background: rgba(179, 0, 0, 0.06);
}

.rules-links-box {
  margin-top: 0.8em;
  padding: 0.8em;
  border-radius: 10px;
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(0,0,0,0.06);
}

.rules-links-box p {
  margin-bottom: 0.55em;
}

.rules-links-box p:last-child {
  margin-bottom: 0;
}

.rules-qr {
  margin-top: 0.8em;
  text-align: center;
}

.rules-qr img {
  max-width: 220px;
  width: 100%;
  height: auto;
}

@media all and (max-width:48em) {
  .rules-box {
    padding: 0.9em;
  }

  .rules-box h2 {
    font-size: 1rem;
  }

  .rules-box summary {
    font-size: 0.85rem;
    padding: 0.65em 0.8em;
  }

  .rules-box .akkordeon-inhalt {
    font-size: 0.84rem;
    padding: 0.8em;
  }

  .rules-qr img {
    max-width: 180px;
  }
}

.support-box {
  margin-top: 1em;
  padding: 1em;
  border-radius: 12px;
  background: linear-gradient(145deg, #f8f8f8, #eeeeee);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
  text-align: left;
}

.support-box + .support-box {
  margin-top: 1.2em;
}

.support-box h2 {
  margin: 0 0 0.8em;
  font-size: 1.1rem;
  color: #1f194c;
}

.support-box h3 {
  margin: 0 0 0.45em;
  font-size: 1rem;
  color: #1f194c;
}

.support-box p {
  margin: 0 0 0.8em;
  color: #333333;
  line-height: 1.6;
}

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

.support-box a {
  color: #b30000;
  text-decoration: none;
}

.support-box a:hover {
  text-decoration: underline;
}

.support-lead {
  padding: 1.05em;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(254, 0, 2, 0.04), rgba(254, 0, 2, 0.02));
  border: 1px solid rgba(254, 0, 2, 0.10);
}

.support-lead h2 {
  margin: 0 0 0.6em;
  font-size: 1.45rem;
  line-height: 1.2;
  color: #7a1c1d;
}

.support-lead p {
  margin: 0 0 0.85em;
  font-size: 0.98rem;
  line-height: 1.7;
  color: #2f2f2f;
}

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

.support-lead-badge {
  display: inline-block;
  padding: 0.25em 0.7em;
  margin-bottom: 0.6em;
  border-radius: 999px;
  background: rgba(254, 0, 2, 0.08);
  border: 1px solid rgba(254, 0, 2, 0.18);
  color: #b30000;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.support-note {
  margin-top: 1em;
  padding: 1em 1.05em;
  border-radius: 10px;
  background: linear-gradient(145deg, #fff7dc, #fff1bf);
  border: 1px solid rgba(255, 204, 0, 0.22);
  border-left: 4px solid #ffcc00;
  box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}

.support-note p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4a3b00;
  font-weight: 500;
}

.support-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9em;
  margin-top: 1em;
}

.support-card {
  padding: 0.95em 1em;
  border-radius: 12px;
  background: linear-gradient(145deg, #e8f6f2, #dff1ec);
  border: 1px solid rgba(72, 132, 113, 0.16);
  border-left: 4px solid #6aa892;
  box-shadow: 0 5px 12px rgba(0,0,0,0.05);
}

.support-card h3 {
  margin: 0 0 0.55em;
  font-size: 1rem;
  color: #245847;
}

.support-card ul {
  margin: 0;
  padding-left: 1.1em;
}

.support-card li {
  margin-bottom: 0.45em;
  color: #2f3d38;
  line-height: 1.5;
}

.support-card li:last-child {
  margin-bottom: 0;
}

.support-accordion details {
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  margin-bottom: 0.8rem;
  overflow: hidden;
}

.support-accordion summary {
  background: linear-gradient(90deg, #3a0d0f, #2a2a2a);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.7em 0.85em;
  list-style: none;
}

.support-accordion summary::-webkit-details-marker {
  display: none;
}

.support-accordion summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.55em;
  color: #ffcc00;
  transition: transform 0.2s ease;
}

.support-accordion details[open] > summary::before {
  transform: rotate(90deg);
}

.support-accordion-content {
  padding: 0.9em;
  font-size: 0.9rem;
  text-align: left;
}

.support-accordion-content p {
  margin: 0 0 0.7em;
}

.support-accordion-content p:last-child {
  margin-bottom: 0;
}

.bank-data p {
  margin-bottom: 0.45em;
}

.bank-label {
  display: inline-block;
  min-width: 120px;
  font-weight: 700;
  color: #1f194c;
}

.support-qr {
  margin-top: 0.8em;
  text-align: center;
}

.support-qr img {
  max-width: 260px;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: #ffffff;
  padding: 0.4em;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.ledger-links p {
  margin-bottom: 0.55em;
}

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

@media all and (max-width:48em) {
  .support-box {
    padding: 0.9em;
  }

  .support-lead {
    padding: 0.9em;
  }

  .support-lead h2 {
    font-size: 1.15rem;
  }

  .support-lead p {
    font-size: 0.9rem;
    line-height: 1.65;
  }

  .support-note p {
    font-size: 0.9rem;
  }

  .support-box h2 {
    font-size: 1rem;
  }

  .support-box h3 {
    font-size: 0.95rem;
  }

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

  .support-card {
    padding: 0.9em;
  }

  .support-accordion summary {
    font-size: 0.85rem;
    padding: 0.65em 0.8em;
  }

  .support-accordion-content {
    font-size: 0.84rem;
    padding: 0.8em;
  }

  .bank-label {
    min-width: 100px;
  }

  .support-qr img {
    max-width: 220px;
  }
}

.blog-page .blog-section {
  min-height: auto;
  height: auto;
  display: block;
  padding: 1.2em 0 2em;
}

.blog-page .row_fb {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1em;
}

.blog-page .blog-sidebar {
  flex: 0 0 32%;
  max-width: 32%;
}

.blog-page .blog-main {
  flex: 0 0 66%;
  max-width: 66%;
}

.blog-page .column_fb {
  padding: 0.5em;
  box-sizing: border-box;
  text-align: center;
}

.blog-page .card_img {
  height: auto;
}

.blog-feed-box {
  margin-top: 1em;
  padding: 1em;
  border-radius: 12px;
  background: linear-gradient(145deg, #f8f8f8, #eeeeee);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
  text-align: left;
}

.blog-feed-box h2 {
  margin: 0 0 0.8em;
  font-size: 1.1rem;
  color: #1f194c;
}

.blog-feed-fallback {
  margin-top: 1em;
  padding: 0.85em 0.95em;
  border-radius: 10px;
  background: rgba(255,255,255,0.72);
  border-left: 4px solid #ffcc00;
  border: 1px solid rgba(0,0,0,0.06);
}

.blog-feed-fallback p {
  margin: 0 0 0.5em;
}

.blog-feed-fallback p:last-child {
  margin-bottom: 0;
}

.blog-page .fb-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: block;
  overflow: hidden;
}

.blog-page .fb-page {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

.blog-page .fb-page span,
.blog-page .fb-page iframe,
.blog-page .fb-page span iframe {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

.blog-page .fb-page iframe,
.blog-page .fb-page span iframe {
  min-height: 760px !important;
}

@media all and (max-width: 64em) {
  .blog-page .blog-sidebar,
  .blog-page .blog-main {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media all and (max-width: 48em) {
  .blog-page .fb-page iframe,
  .blog-page .fb-page span iframe {
    min-height: 680px !important;
  }
}