html, body {
  background-color: #3069f0;
  color: #ddd;
  min-height: 100%;
  margin: 0;
  padding: 0;
  text-rendering: optimizeLegibility;
  -webkit-text-stroke: 0.2px;
}
    :root{
      --card: #3069f0;
      --accent: #fff;
      --text: #0000ff;
      --radius: 12px;
      --shadow: 0 8px 24px rgba(17,17,17,.06);
    }
    
    
/* to top */
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .back-to-top { transition: none; }
  }

  .back-to-top {
    --size: 48px;
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: var(--size);
    height: var(--size);
    display: inline-grid;
    place-items: center;
    background: white;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    border: 1px solid rgba(0,0,0,0.06);
    text-decoration: none;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.98);
    transition: opacity .22s cubic-bezier(.2,.9,.3,1), transform .22s cubic-bezier(.2,.9,.3,1), visibility .22s;
    outline: none;
    color: #111; /* Pfeilfarbe über currentColor steuerbar */
  }

  .back-to-top:focus {
    box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 0 0 4px rgba(34,139,230,0.18);
  }

  .back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }

  .back-to-top svg { width: 56%; height: 56%; display:block; pointer-events:none; }

  @media (max-width:480px) {
    .back-to-top { right: 0.6rem; bottom: 0.6rem; --size:44px; }
  }

  .skip-anchor { position: absolute; top: 0; left: 0; }
    
 /*Toggle*/
    .card{
      width: 100%;
      max-width: 800px;
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .item + .item { border-top: 1px solid rgba(0,0,0,.06); }

    .toggle-bar{
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 16px 20px;
      background: linear-gradient(180deg, rgba(107,70,193,0.07), transparent);
      border: none;
      cursor: pointer;
      text-align: left;
      font-weight: 700;
      font-size: 1rem;
      color: var(--accent);
      gap: 12px;
    }

    .toggle-bar:focus{
      outline: 3px solid rgba(107,70,193,.16);
      outline-offset: -3px;
    }
    
	.right-group {
  	display: flex;
  	align-items: center;
  	gap: 6px; /* Abstand zwischen Hinweis und Pfeil */
	}
	
    .title {
      font-weight: 700;
    }

    .hint {
      font-size: 0.85rem;
      color: white;
      margin-left: 8px;
    }

    .chevron{
      width: 18px;
      height: 18px;
      transition: transform .28s cubic-bezier(.2,.9,.2,1);
      transform-origin: center;
      color: var(--accent);
      flex-shrink: 0;
    }
    .chevron.open{ transform: rotate(180deg); }

    .collapsible{
      max-height: 0;
      overflow: hidden;
      transition: max-height .32s cubic-bezier(.2,.9,.2,1);
      background: transparent;
    }

    .collapsible .inner{
      padding: 0 20px 18px 20px;
      line-height: 1.6;
      opacity: 0;
      background: #222;      
      box-sizing: border-box;
      transition: opacity .18s ease;
    }
    .collapsible.open .inner{
      opacity: 1;
      border: 1px solid #3069f0;
      border-radius: 12px;
      margin-top: 6px;
      background: #222;
      box-sizing: border-box;      
    }

    @media (prefers-reduced-motion: reduce){
      .collapsible{ transition: none; }
      .chevron{ transition: none; }
    }	

/*rest*/
@font-face {
	font-family: 'Santana';
	src: url('https://rene-amtenbrink.de/_core/Santana.ttf');
}

body { font-family: Calibri,Arial,Tahoma; 
background-color: #0130fc;
background: linear-gradient(to bottom,
    #4a68ff 0%,
    #0130fc 7%,      
    #0130fc 40%,     
    #002399 88%);
    #031144 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100% 100vh;    
	margin: 0;
    padding: 0;
    height: 100%;           
            }

#container {
	border-radius: 10px;
	border: 2px solid #000000;
    background-color: #000936;
	padding-top: 0px;
	padding-left: 10px;
	padding-right: 10px;
	margin:auto;
    box-shadow: 0 8px 24px rgba(17,17,17,0.7);
}		

h1,h2,h3,h4 { font-family: 'Santana',Calibri,Arial,Tahoma;
text-rendering:optimizeLegibility;
color: #ddd; 
  text-shadow: 1px 1px 1px #acacac;
  }
  
h1 {font-size: 2em;}
h2 {font-size: 2em;}
h3 {font-size: 2em;}
h4 {font-size: 2em;}

p,ul,ol,li,.norm {font-size: 1.1em; color: #ddd; font-weight: 300;}
small {color: #ddd; font-weight: 300;}

em{}
strong {}
a:link {color:#3069f0; text-decoration:none;}
a:visited {color:#3069f0; text-decoration:none;}
a:active {color:#3069f0; text-decoration:none;}

header h1 {
	text-align: center;
}
footer {
	font-size: 7pt;	
}
footer p {
	text-align: center;
}
.dsgvo {
	font-size: 7pt;
	 color: #ffffff; 
}

.dsgvo a:link {color:#000000; text-decoration:none;}

.dsgvo a:visited {color:#000000; text-decoration:none;}

.dsgvo a:active {color:#000000; text-decoration:none;}

*,*:before,
*:after{box-sizing:inherit;}
html{-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
box-sizing:border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


.left {

  padding: 0.5em;
  float: left;
  width: 33%; 
}

.middle {
;
  padding: 0.5em;
  float: left;
  width: 33%; 
}

.right {

  padding: 0.5em;
  float: right;
  width: 33%; 
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

	#container { 
	max-width: 830px;
	  }
	  

	/*medium*/
@media screen and (max-width: 850px){
	body {
	#container { 
	max-width: 830px;
	.left, .middle, .right {
    width: 100%; 
	  }
	
	}
	
h1 {font-size: 40pt;}
h2 {font-size: 30pt;}
h3 {font-size: 20pt;}
h4 {font-size: 15pt;}
}

	  
	/*small*/
@media screen and (max-width: 500px){
body {         
}
h1 {font-size: 1.5em;}
h2 {font-size: 1.3em;}
h3 {font-size: 1.1em;}	  
h4 {font-size: 1.1em;}	 
}

/* Container für YT-Video */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* Verhältnis 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
}

/* Das eingebettete YouTube-Video */
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.menu {color:#999;}

.bigbutton {
  display: inline-block;
  background: linear-gradient(35deg, #dda936, #f3e6c9);
  color: #3a2e1f;
  font-weight: 500;
  padding: 12px 28px;
  border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
  font-size: 1em;
}
.bigbutton:hover {
  background: linear-gradient(135deg, #dda936, #f3e6c9);
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(0,0,0,0.25);
}
.bigbutton:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}