:root{
  --clr-primary:#1e90ff;
  --clr-primary-d:#0066cc;
  --clr-bg:#f4f9ff;
  --clr-overlay:rgba(255,255,255,0.95);
  --clr-text:#1a1a1a;
  --clr-gradient-1:#dceeff;
  --clr-gradient-2:#a5cfff;
  --clr-gradient-text-1:#1e90ff;
  --clr-gradient-text-2:#0066cc;
  --clr-focus-ring:rgba(30,144,255,0.25);
  --clr-decor:rgba(30,144,255,0.15);
  --radius:12px;
  --gap:1.5rem;
}

body.theme-blue {
  --clr-primary:#1e90ff;
  --clr-primary-d:#0066cc;
  --clr-bg:#f4f9ff;
  --clr-overlay:rgba(255,255,255,0.95);
  --clr-text:#1a1a1a;
  --clr-gradient-1:#dceeff;
  --clr-gradient-2:#a5cfff;
  --clr-gradient-text-1:#1e90ff;
  --clr-gradient-text-2:#0066cc;
  --clr-focus-ring:rgba(30,144,255,0.25);
  --clr-decor:rgba(30,144,255,0.15);
}

body.theme-orange {
  --clr-primary:#ffb300;
  --clr-primary-d:#ff9800;
  --clr-bg:#fff8f0;
  --clr-overlay:rgba(255,255,255,0.95);
  --clr-text:#3a2c1a;
  --clr-gradient-1:#fff4e0;
  --clr-gradient-2:#ffe0b3;
  --clr-gradient-text-1:#ffb300;
  --clr-gradient-text-2:#ff9800;
  --clr-focus-ring:rgba(255,179,0,0.3);
  --clr-decor:rgba(255,179,0,0.15);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;}
body{background:var(--clr-bg);color:var(--clr-text);}

.menu-basis {
	display: flex;
	flex-direction: column;
	padding: 2rem;
}

th, td {
	white-space: nowrap;
}

select {
	border: none;
	color: #fff;
	background-color: var(--clr-primary);
	padding: .5rem;
	border-radius: var(--radius);
	font-weight: bold;
}

.box {
	background-color: #fff;
	padding: 1rem;
	margin: .5rem;
	border-radius: var(--radius);
	width: 100%;
	box-shadow: .9rem .8rem 1rem -1rem #000;
	gap: 1rem;
}

.forms{
  margin-top:0rem;
  margin-bottom:.5rem;
  display:inline-grid;
  gap:var(--gap);
  max-width:600px;
  margin-inline:auto;
  position: relative;
  left: 100%;
  transform: translateX(-130%);
  bottom: .7rem;
}

.logo {
	display: inline;
	top: 1rem;
	left: 1rem;
	position: relative;
}

form{display:flex;flex-direction:column;gap:.6rem;}

.form-row{
  display:flex;
  gap:.5rem;
  align-items:center;
  flex-wrap:wrap;
}

.form-row-nocolumn{
  display:flex;
  gap:.5rem;
  align-items:center;
  flex-wrap:wrap;
}

.form-column{
  display:flex;
  gap:.5rem;
  align-items:center;
  flex-wrap:wrap;
  flex-direction:column;
}

.form-column button{
  width:100%;
  margin-top:.5rem;
}

.form-row input{
  flex:1 1 120px;
  min-width:0;
}
.form-row button{
  flex:0 0 auto;
}

input[type=text],input[type=password],input[type=email]{
  padding:.6rem .8rem;
  border:1px solid #cbd5e0;
  border-radius:var(--radius);
  font-size:1rem;
  background:#fff;
  transition:border-color .2s,box-shadow .2s;
  width:100%;
  flex-basis: content;
}
input:focus{
  outline:none;
  border-color:var(--clr-primary);
  box-shadow:0 0 0 3px var(--clr-focus-ring);
}
button{
  padding:.7rem 1.2rem;
  border:none;
  border-radius:var(--radius);
  background:var(--clr-primary);
  color:#fff;
  font-weight:600;
  cursor:pointer;
  transition:background .2s,transform .1s;
}
button:hover{background:var(--clr-primary-d);}
button:active{transform:translateY(1px);}

.button{
  padding:.7rem 1.2rem;
  border:none;
  border-radius:var(--radius);
  background:var(--clr-primary);
  color:#fff;
  font-weight:600;
  cursor:pointer;
  transition:background .2s,transform .1s;
  text-decoration-line:none;
  display: inline;
  font-size: 1rem;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  flex-grow: 0 !important;
}
.button:hover{background:var(--clr-primary-d);}
.button:active{transform:translateY(1px);}
label{cursor:pointer}

.information {
	text-align: left;
	padding: 1rem;
	padding-left: 3rem;
}

.info-section{
  position: fixed;
  top: 6rem;
  bottom: 0;
  width: 100%;
  display:grid;
  place-items:center;
  text-align:center;
  background:linear-gradient(135deg,var(--clr-gradient-1),var(--clr-gradient-2));
  padding:2rem;
  padding-top:4rem;
  z-index: -80;
}
.headline{
  font-size:clamp(2rem,7vw,4rem);
  font-weight:900;
  background:linear-gradient(45deg,var(--clr-gradient-text-1),var(--clr-gradient-text-2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:var(--gap);
  animation:fadeIn 1s ease-out forwards;
  margin-top:0rem;
}
.subtext{
  max-width:42ch;
  margin:auto;
  font-size:1.1rem;
  line-height:1.5;
  opacity:0;
  animation:fadeIn 1.5s ease-out forwards;
}
.decor{
  bottom: 0;
  position:fixed;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 20% 30%,var(--clr-decor),transparent 60%);
  clip-path:polygon(0 0,100% 0,100% 70%,0 100%);
  z-index: -50;
}
@keyframes fadeIn{
  from{opacity:0;transform:translateY(12px);}
  to{opacity:1;transform:translateY(0px);}
}

.overlay-container {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#register-overlay:checked ~ .overlay-container {
  opacity: 1;
  pointer-events: auto;
}

.overlay-bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#register-overlay:checked ~ .overlay-container .overlay-bg {
  opacity: 1;
}

.overlay-content {
  position: relative;
  background: var(--clr-overlay);
  padding: 2rem;
  border-radius: var(--radius);
  max-width: 400px;
  width: 90%;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  transform: translateY(-20px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
#register-overlay:checked ~ .overlay-container .overlay-content {
  transform: translateY(0);
  opacity: 1;
}

.top-bar {
	position:fixed; 
	top:0; 
	left:0; 
	right:0; 
	height: 6rem; 
	background:var(--clr-bg); 
	z-index: 150;
}

.close-overlay {position: fixed; right: 8%; top: 8%; color:var(--clr-gradient-text-2)}

th {
	padding: .2rem;
	width: 3rem
}
.table_border {
  border: 1px solid black;
  border-collapse: collapse;
}

.content {
	position: absolute;
	top: 6rem;
	width: 100%;
	left: 0;
	text-align:center;
	place-items:center;
	padding:2rem;
	padding-top:1rem;
	display: grid;
}

.information-popup {
	left: 50%;
	top: 7rem;
	transform: translateX(-50%);
	position: absolute;
	background: red;
	padding: 2rem;
	border: 1px solid black;
	width: auto;
	border-radius: var(--radius);
	box-shadow: .9rem .8rem 1rem -1rem #000;
	animation:fadeInTranslate .5s ease-out forwards;
	z-index: 250;
}


@keyframes fadeInTranslate{
  0%{opacity:0;transform:translateX(-50%) translateY(12px); z-index: -500}
  1%{opacity:0;transform:translateX(-50%) translateY(12px); z-index: 200}
  100%{opacity:1;transform:translateX(-50%) translateY(0);}
}

@keyframes fadeOutTranslate{
  0%{opacity:1;transform:translateX(-50%) translateY(0);}
  99%{opacity:0;transform:translateX(-50%) translateY(12px); z-index: 200}
  100%{opacity:0;transform:translateX(-50%) translateY(12px); z-index: -500}
}

#information-popup-checkbox {
  display: none;
}

#information-popup-checkbox:checked ~ .information-popup {
	animation:fadeOutTranslate .5s ease-out forwards;
}

/*Fortschrittsbalken Abiturnote*/

.circle-wrap {
  display: grid;
  grid-template-columns: repeat(1, 160px);
  grid-gap: 80px;
  width: 150px;
  height: 150px;
  background: var(--clr-gradient-1);
  border-radius: 50%;
}

.circle-wrap .circle .mask,
.circle-wrap .circle .fill{
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
}

.circle-wrap .circle .mask {
  clip: rect(0px, 150px, 150px, 75px);
}

.circle-wrap .inside-circle {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: #fff;
  line-height: 120px;
  text-align: center;
  margin-top: 13px;
  margin-left: 13px;
  position: absolute;
  z-index: 100;
  font-weight: 700;
  font-size: 2em;
  color: #000000;
}

@media (max-width:750px){
  .form-row{
    flex-direction:column;
    gap:0.4rem;
  }
  .form-row input{
    width:100%;
    padding:.5rem .8rem;
	flex:1 1 1rem
  }
  .form-row button{
    width:100%;
    padding:.6rem 1rem;
    font-size:0.95rem;
  }
  
}
@media (max-height:640px){
  .headline{margin-top:10rem;}
}