@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{
    --color-primary: #7380ec;
    --color-danger: #ff7782;
    --color-success: #41f1b6;
    --color-warning: #ffbb55;
    --color-white: #fff;
    --color-info: #7d8da1;
    --color-dark: #363949;
    --color-light: rgba(132, 139, 200, 0.18);
    --color-dark-varient: #677483;
    --color-background: #f6f6f9;
    
    --card-border-radius: 2rem;
    --border-radius-1: 0.4rem;
    --border-radius-2: 1.2rem;

    --card-padding: 1.8rem;
    --box-shadow: 0 2rem 3rem var(--color-light)    
}

.dark-theme{
    --color-background: #181a1e;
    --color-white: #202528;
    --color-dark: #edeffd;
    --color-dark-varient: #a3bdcc;
    --color-light: rgba(0,0,0,0.4);
    --box-shadow: 0 2rem 3rem var(--color-light)
}

.dark-theme header .logo img {
  content: url("/image-content/Logo/Logo-Trans-PS-Weis.png");
}


*{
    margin:0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

html{
    font-size: 14px;
    scroll-behavior: smooth;
}
body{
    font-family: 'Poppins', sans-serif;
    font-size: .88rem;
    background: var(--color-background);
    user-select: none;
    overflow-x: hidden;
    color: var(--color-dark);
}

/* Start: Seite unsichtbar halten */
body.loading .container,
body.loading header,
body.loading .right { visibility: hidden; }

#app-loader{
  position: fixed; inset: 0; display: grid; place-items: center;
  background: rgba(255,255,255,.85); z-index: 9999;
  transition: opacity .25s ease, visibility .25s ease;
}

/* Box aus Spinner + Text mit kleinem Abstand */
#app-loader .spinner,
#app-loader p{
  margin: 0;               /* Abstand zurücksetzen */
}
#app-loader .loader-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;                /* <-- kleiner Abstand zwischen Kreis & Text */
}

#app-loader .spinner{
  width: 48px; height: 48px; border: 4px solid #cfd8dc; border-top-color: #7c83ff;
  border-radius: 50%; animation: spin 1s linear infinite;
}

#app-loader p{ color: #fff; }   

@keyframes spin { to { transform: rotate(360deg); } }

/* Ausblenden */
body:not(.loading) #app-loader{ opacity: 0; visibility: hidden; }
*{
    color: var(--color-dark);
}
img{
    display: block;
    width: 100%;
}
h1{
    font-weight: 800;
    font-size: 1.8rem;
}
h2{font-size: 1.4rem;}
h3{font-size: .87rem;}
h4{font-size: .8rem;}
h5{font-size: .77rem;}
small{font-size: .75rem;}

.text-muted{color: var(--color-info);}
p{color: var(--color-dark-varient);}
b{color: var(--color-dark);}

.primary{color: var(--color-primary);}
.danger{color: var(--color-danger);}
.success{color: var(--color-success)}
.warning{color: var(--color-warning);}

.container{
    position: relative;
    display: grid;
    width: 93%;
    margin: 0 3rem;
    gap: 1.8rem;
    grid-template-columns: 14rem auto 23rem;
    padding-top: 4rem;
}
header h3{font-weight: 500;} 
header{
    position: fixed;
    width: 100vw;
    z-index: 1000;
    background-color: var(--color-background);
}
header.active{box-shadow: var(--box-shadow);}
header .logo{
    display: flex;
    gap: .8rem;
    margin-right: auto;
}
header .logo img {
    width: 6rem;  /* statt 5rem */
    height: 6rem; /* statt 5rem */
}

header,
header .navbar{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 3rem;
    color: var(--color-info);
}
header .navbar a{
    display: flex;
    margin-left: 3.5rem;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    position: relative;
    height: 3.7rem;
    transition: all 300ms ease;
    padding: 0 2rem;
}

header .navbar a.active{
    background: var(--color-light);
    color: var(--color-primary);
}
header .navbar a.active::before{
    content: "";
    background-color: var(--color-primary);
    position: absolute;
    height: 5px;
    width: 100%;
    left: 0;top: 0;
}
header #profile-btn{
    display: none;
    font-size: 2rem;
    margin: .5rem 2rem 0 0;
    cursor: pointer;
}
header .theme-toggler{
    background: var(--color-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 1.6rem;
    width: 4.2rem;
    cursor: pointer;
    border-radius: var(--border-radius-1);
    margin-right: 2rem;
}
header .theme-toggler span{
    font-size: 1.2rem;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
header .theme-toggler span.active{
    background-color: var(--color-primary);
    color: white;
    border-radius: var(--border-radius-1);
}

/* Profile section  */
aside .profile{
    margin-top: 2rem;
    width: 13rem;
    position: fixed;
}
aside .profile .top{
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid var(--color-light);
    padding-bottom: 1rem;
}
aside .profile .top:hover .profile-photo{
    scale: 1.05;
}
aside .profile .top .profile-photo{
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid var(--color-light);
    transition: all 400ms ease;
}
aside .profile .about p{
    padding-bottom: 1rem;
}
aside .profile .about{
    margin-top: 1rem;
}

/* Home Section  */
main{
    position: relative;
    margin-top: 1.4rem;
}
/* Horizontales Scrollen für Fächer */
:root{
  --subjects-card-w: 250px;   /* Kartenbreite */
  --subjects-gap: 1.6rem;     /* Abstand */
}

/* NEU – füllt die Main-Spalte, ohne sie zu vergrößern */
main .subjects{
  display: flex;
  gap: var(--subjects-gap);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1rem 0 1rem 0.2rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  width: 100%;
  max-width: 100%;        /* Kappe auf Spaltenbreite */
  box-sizing: border-box; /* Padding zählt mit → kein „Mitverlängern“ */
}

/* Jede Karte bleibt fix breit, Snap am Anfang */
main .subjects > div{
  flex: 0 0 var(--subjects-card-w);
  scroll-snap-align: start;
}

/* (optional) Scrollbar hübsch */
main .subjects::-webkit-scrollbar { height: 8px; }
main .subjects::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 10px; }
main .subjects::-webkit-scrollbar-track { background: var(--color-light); }

main .subjects h3{
    margin: 1rem 0 0.6rem;
    font-size: 1rem;
}
main .subjects .progress{
    position: relative;
    width: 89px;
    height: 89px;
    border-radius: 50%;
    margin: auto;
}
main .subjects svg circle{
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 8;
    stroke-linecap: round;
    transform: translate(5px, 5px);
    stroke-dasharray: none;   /* oder weglassen */
  stroke-dashoffset: 0;     /* Startzustand, JS übernimmt danach */
}

main .subjects .progress .number{
    position: absolute;
    top: 0;left: 0;
    font-size: 1rem;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ring-Animation */
.progress svg circle{
  transition: stroke-dashoffset .8s ease-out, opacity .2s ease;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

/* optional: sanftere Kante */
.progress svg circle{ stroke-linecap: round; }

/* Respektiert „weniger Bewegung“-Systemeinstellung */
@media (prefers-reduced-motion: reduce){
  .progress svg circle{ transition: none; }
}
main .subjects small{
    margin-top: 1rem;
    display: block;
}
main .timetable{
    margin-top: 2rem;
}
main .timetable h2{
    margin-bottom: .8rem;
}
main .timetable table{
    background-color: var(--color-white);
    width: 100%;
    border-radius: var(--card-border-radius);
    padding: var(--card-padding);
    text-align: center;
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
}
main .timetable span{display: none;}
main .timetable table:hover{box-shadow: none;}
main table tbody td{
    height: 2.8rem;
    border-bottom: 1px solid var(--color-light);
    color: var(--color-dark-varient);
}

/* Nur Styling für "Finish up"-Links – keine pointer-events-Tricks */
#timetable table a.finish-up-link {
  display: inline-block;         /* größere Touch-Zone auf iPad */
  padding: 0.25rem 0.4rem;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  border-radius: 0.3rem;
}

#timetable table a.finish-up-link:hover {
  text-decoration: underline;
}

main table tbody tr:last-child td{border: none;}

main .timetable.active{
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
main .timetable.active h2{
    color: var(--color-dark);
}
main .timetable.active table{
    width: 90%;
    max-width: 1000px;
    position: relative;
}
main .timetable.active span{
    display: block;
    font-size: 2rem;
    color: var(--color-dark);
    cursor: pointer;
}
.timetable div{
    position: relative;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
main .timetable.active .closeBtn{
    position: absolute;
    top: 5%;right: 5%;
}


/* Right  */
.right{margin-top: 2.2rem;padding-left: 1.5rem;}

.right .announcements h2{margin-bottom: .8rem;}
.right .announcements .updates{
    background-color: var(--color-white);
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
}
.right .announcements .updates:hover{box-shadow: none;}
.right .announcements .updates .message{
    gap: 1rem;
    line-height: 1.5;
    padding: .5rem 0;
}

/* Teachers on leave  */
.right .leaves{margin-top: 2rem;}
.right .leaves h2{margin-bottom: .8rem;}
.right .leaves .teacher{
    background: var(--color-white);
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .7rem;
    padding: 1.4rem var(--card-padding);
    border-radius: var(--border-radius-2);
    transition: all 300ms ease;
    box-shadow: var(--box-shadow);
}
.right .profile-photo{
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    overflow: hidden;
}
.right .leaves .teacher:hover{box-shadow: none;}


.grade-link {
    color: #7380ec; /* Change this to your desired color */
    text-decoration: none; /* Remove underline */
}

.grade-link:hover {
    color: #7380ec; /* Change this to your desired hover color */
    text-decoration: underline; /* Add underline on hover */
}


 /* Center the dropdown on the screen */
 .dropdown-container {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align items to the top */
    height: 100vh; /* Full viewport height */
    padding-top: 2rem; /* Adjust this value to control how close to the top the dropdown appears */
}


/* Dropdown styling */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-select {
    background-color: var(--color-white);
    color: var(--color-dark);
    padding: 1rem;
    font-size: 1rem;
    border: 1px solid var(--color-light);
    border-radius: var(--border-radius-1);
    cursor: pointer;
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
    width: 200px;
}

.dropdown-select:hover {
    box-shadow: none;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--color-white);
    width: 600px; /* Adjust width as needed */
    box-shadow: var(--box-shadow);
    z-index: 1;
    border-radius: var(--border-radius-1);
    padding: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    
}

.dropdown-content a {
    color: var(--color-dark);
    font-size: 0.9rem; /* Größere Schrift */
    padding: 1rem 1.5rem; /* Mehr Abstand innerhalb der Kacheln */
    min-height: 50px; /* Mindesthöhe für die Kacheln */
    display: flex; /* Falls nötig, damit Text mittig ist */
    align-items: center;
    text-decoration: none;

    transition: all 300ms ease;
}

.dropdown-content a:hover {
    background-color: var(--color-light);
    color: var(--color-primary);
}

.dropdown:hover .dropdown-content {
    display: grid;
}



/* Passwort-Modal */
.modal-backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  z-index: 2000;
}
.modal{
  position: fixed; inset: 0; display: grid; place-items: center;
  z-index: 2001;
}
.modal[hidden], .modal-backdrop[hidden]{ display: none; }

.modal > *{
  background: var(--color-white);
  width: min(520px, 92vw);
  border-radius: var(--card-border-radius);
  box-shadow: var(--box-shadow);
  padding: calc(var(--card-padding) - .3rem);
}

.modal-header{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.5rem;
}
.icon-btn{
  border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--border-radius-1);
}
.icon-btn:hover{ background: var(--color-light); }

.form-row{
  display: grid; gap: .4rem; margin: .9rem 0;
}
.form-row span{ font-weight: 500; }
.form-row input{
  padding: .9rem 1rem;
  border: 1px solid var(--color-light);
  border-radius: var(--border-radius-1);
  background: var(--color-background);
  color: var(--color-dark);
  outline: none;
}
.form-row input:focus{
  border-color: var(--color-primary);
  box-shadow: 0 0 0 .15rem rgba(115,128,236,.2);
}
.form-hint{
  min-height: 1.2rem;
  font-size: .8rem;
  color: var(--color-info);
  margin-top: .2rem;
}

.modal-actions{
  display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem;
}
.btn{
  border: 0; cursor: pointer; padding: .9rem 1.2rem;
  border-radius: var(--border-radius-1);
  font-weight: 600;
}
.btn.primary{ background: var(--color-primary); color: white; }
.btn.ghost{ background: var(--color-light); }
.btn:disabled{ opacity: .6; cursor: not-allowed; }

.modal-card {
  background: var(--color-white);
  width: min(520px, 92vw);
  border-radius: var(--card-border-radius);
  box-shadow: var(--box-shadow);
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
}

.modal-card h3 {
  margin-bottom: 0.8rem;
  text-align: center;
  font-weight: 600;
}

.modal-header { display: none; } /* remove any old header space */

/* Toast */
.toast{
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  max-width: min(420px, 90vw);
  background: var(--color-white);
  color: var(--color-dark);
  border-radius: var(--border-radius-1);
  box-shadow: var(--box-shadow);
  padding: .75rem 1rem;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 3000;
}
.toast.show{
  opacity: 1;
  transform: translateY(0);
}
.toast.success{ border-left: .3rem solid var(--color-success, #16a34a); }
.toast.error{   border-left: .3rem solid var(--color-danger,  #dc2626); }
.toast.info{    border-left: .3rem solid var(--color-primary, #737fed); }


/* Make "Change password" smaller + closer to the email line */
aside .profile .about #email{
  padding-bottom: .25rem;   /* was 1rem via generic rule */
  margin-bottom: 0;
}

aside .profile .about .grade-link{
  display: inline-block;
  font-size: .80rem;        /* smaller text */
  line-height: 1.1;
  margin-top: .10rem;       /* move closer to email */
  color: var(--color-primary);
  text-decoration: none;
}

aside .profile .about .grade-link:hover{
  text-decoration: underline;
}

body.frozen header, body.frozen .container, body.frozen aside, body.frozen main, body.frozen .right { 
  pointer-events: none; filter: grayscale(.2) brightness(.9);
}
/* Keep loader visible */
#app-loader { position: fixed; inset: 0; background: rgba(17,24,39,.6); z-index: 2147483646; }


.dropdown-content.disabled { 
  pointer-events: none; 
  opacity: .5; 
  filter: grayscale(.2); 
}

/* --- Partner Products Section --- */
.right .partner-products {
  background: var(--color-white);
  padding: var(--card-padding);
  border-radius: var(--card-border-radius);
  box-shadow: var(--box-shadow);
  transition: all 300ms ease;
  margin-top: 2rem;
}

.right .partner-products:hover {
  transform: translateY(-3px);
  box-shadow: 0 1.2rem 2rem rgba(115, 128, 236, 0.15);
}

.right .partner-products h2 {
  color: var(--color-primary);
  text-align: center;
  font-weight: 600;
  margin-bottom: 1.2rem;
  position: relative;
}

.right .partner-products h2::after {
  content: "";
  display: block;
  width: 40%;
  height: 3px;
  background: var(--color-primary);
  margin: 0.4rem auto 0;
  border-radius: 10px;
  opacity: 0.3;
}

.right .partner-products .partner-card {
  background: linear-gradient(135deg, #ffffff, #f3f4ff);
  border: 1px solid rgba(115, 128, 236, 0.15);
  border-radius: var(--border-radius-2);
  box-shadow: var(--box-shadow);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem var(--card-padding);
  transition: all 300ms ease;
}

.right .partner-products .partner-card:hover {
  transform: scale(1.02);
  box-shadow: 0 0.8rem 1.5rem rgba(115, 128, 236, 0.2);
}

.right .partner-products .partner-card .material-icons-sharp {
  font-size: 2rem;
  color: var(--color-primary);
}

.right .partner-products .partner-info h3 {
  color: var(--color-dark);
  margin-bottom: 0.3rem;
}

.right .partner-products .partner-info small {
  display: block;
  color: var(--color-info);
  font-size: 0.82rem;
}

/* === DARK MODE: Partner Products === */
.dark-theme .partner-products {
  background: var(--color-white);
}

.dark-theme .partner-products h2 {
  color: var(--color-dark);
}

.dark-theme .partner-products .partner-card {
  background: linear-gradient(135deg, #2a2d33, #1e2026);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4);
}

.dark-theme .partner-products .partner-card:hover {
  box-shadow: 0 1.2rem 2rem rgba(0, 0, 0, 0.55);
}

.dark-theme .partner-products .partner-card .material-icons-sharp {
  color: var(--color-primary);
}

.dark-theme .partner-products .partner-info h3 {
  color: var(--color-dark);
}

.dark-theme .partner-products .partner-info small {
  color: var(--color-info);
}



/* === FOOTER === */
.footer-dark {
  width: 100%;
  background-color: #1e212e;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  text-align: center;
  padding: 25px 10px;
  position: fixed;
  bottom: 0;
  left: 0;
}

.footer-inner {
  max-width: 900px;
  margin: 0 auto;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-links li {
  display: inline-flex;
  align-items: center;
}

.footer-links li::before {
  content: "·";
  padding: 0 8px;
  color: rgba(255, 255, 255, 0.4);
}

.footer-links li:first-child::before {
  content: "";
  padding: 0;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-copy {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

/* === iPad & kleiner: Grid umbauen, nichts abschneiden === */

/* 1) Zwischenbreakpoint: rechte Spalte unter den Main-Inhalt schieben */
@media (max-width: 1200px) {
  .container{
    grid-template-columns: 12rem 1fr; /* Sidebar schmaler, Main flexibel */
    gap: 1.2rem;
    width: auto;
    margin: 0 1rem;
  }
  /* rechte Spalte vollbreit unter Main */
  .right{
    grid-column: 1 / -1;
    min-width: 0;            /* verhindert Überlaufen */
  }
}

/* 2) iPad-Hoch/quer und kleiner: einspaltig stapeln */
@media (max-width: 1024px) {
  .container{
    grid-template-columns: 1fr; /* alles untereinander */
    gap: 1rem;
    width: 100%;
    margin: 0 0.8rem;
    padding-top: 6rem;          /* Platz für fixed Header */
  }

  /* Sidebar darf NICHT fixed sein, sonst schneidet’s ab */
  aside .profile{
    position: static;
    width: 100%;
  }

  /* Reihenfolge: Main -> Right -> Aside (fühlt sich natürlicher an) */
  main{ order: 1; }
  .right{ order: 2; }
  aside{ order: 3; }

  /* Header innen schmaler, damit nichts herausragt */
  header, header .navbar{
    padding: 0 1rem;
  }

  /* Footer nicht über Inhalte legen */
  .footer-dark{
    position: static;
  }
}

/* 3) Tabelle „Latest Examinations“: weich scrollen statt abschneiden */
@media (max-width: 1200px){
  .timetable table{
    display: block;        /* block-Container, damit overflow greift */
    overflow-x: auto;      /* horizontales Scrollen erlauben */
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;   /* Zellen in einer Zeile lassen */
    max-width: 100%;
  }
  /* optional: Mindestbreite, damit Spalten nicht kollabieren */
  .timetable table{ min-width: 560px; }
}

/* 4) Kleine kosmetische Fixes, die Overflow verhindern */
@media (max-width: 1200px){
  header .navbar a{
    margin-left: 1.2rem;
    padding: 0 1rem;
  }
  .right .partner-products,
  .right .announcements{
    overflow: hidden;   /* verhindert Schatten-/Border-Überlauf */
  }
}
/* === Responsive: Profilbereich oben bei iPad & kleiner === */
@media (max-width: 1024px) {
  .container {
    display: flex;
    flex-direction: column;  /* alles untereinander */
    gap: 1rem;
    width: 100%;
    margin: 0 0.8rem;
    padding-top: 6rem;       /* Platz für Header */
  }

  /* Reihenfolge der Hauptbereiche */
  aside {
    order: 1;                /* Profil ganz oben */
  }

  main {
    order: 2;                /* danach Subjects + Latest Exams */
  }

  .right {
    order: 3;                /* zuletzt Partner Products / Announcements */
  }

  /* Sidebar normal fließend machen */
  aside .profile {
    position: static;
    width: 100%;
  }

  /* Optisch etwas Abstand */
  aside .profile {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  /* Header etwas kompakter */
  header, header .navbar {
    padding: 0 1rem;
  }

  /* Footer nicht überdecken */
  .footer-dark {
    position: static;
  }

  /* Tabelle weich scrollen */
  .timetable table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}
/* === Latest Exams: Header nicht halbbreit === */
.timetable > div {
  width: 100%;              /* statt 50% */
}

/* === Mobile/iPad: Section vollbreit „full-bleed“ zeichnen === */
@media (max-width: 1024px) {
  /* die ganze Sektion bis an den Bildschirmrand ziehen */
  .timetable {
    margin-left: -1rem;
    margin-right: -1rem;
  }
  /* Karte innen wieder hübsch & scroll-fähig halten */
  .timetable table{
    width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;

    /* optional: Kanten angleichen, wenn du echten Full-Bleed willst */
    border-radius: 0;        /* oder weglassen, wenn du runde Ecken magst */
  }

  /* mehr Luft in den Zellen, damit es nicht „gequetscht“ wirkt */
  .timetable table th,
  .timetable table td{
    padding: 0.9rem 1rem;
  }
}
/* === Header der Latest Exams leicht einrücken === */
@media (max-width: 1024px) {
  .timetable > div {
    width: 100%;
    padding-left: 1rem;     /* etwas Abstand vom linken Rand */
    padding-right: 1rem;    /* optional, für optische Balance */
    box-sizing: border-box; /* Padding zählt zur Breite */
  }

  /* optional: die Überschrift selbst noch leicht nach rechts rücken */
  .timetable > div h2 {
    margin-left: 0.3rem;
  }
}

/* NEU: Grid-Kinder dürfen schrumpfen (verhindert, dass rechts etwas rausgeschoben wird) */
.container > main,
.container > .right { min-width: 0; }   /* Desktop + alle Breakpoints */

/* Show-more Button unter Latest Exams */
/* Show-more Button unter Latest Exams – mittig und als Punkt-Menü */
.exams-show-more{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;          /* volle Breite, damit echtes Zentrieren */
  margin-top: 0.8rem;
  margin-bottom: 0.6rem;
}

.exams-show-more{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;          /* volle Breite, damit echtes Zentrieren */
  margin-top: 0.8rem;
  margin-bottom: 0.6rem;
}

#exams-toggle-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;          /* kompaktes Kästchen */
  height: 2.2rem;
  border-radius: 0.6rem;
  border: 1px solid var(--color-light);
  background: var(--color-white);
  cursor: pointer;
  font-weight: 900;     /* „dicke“ Punkte */
  font-size: 1.35rem;  /* größer, damit Punkte fetter wirken */
  line-height: 1;
  box-shadow: var(--box-shadow);
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
  color: transparent;   /* evtl. vorhandenen Text verstecken */
  letter-spacing: .25rem;
}

#exams-toggle-btn::before{
  content: '•••';       /* nur drei dicke Punkte */
  color: var(--color-dark);
}

/* FIX: Show-more Button hover Farben im Darkmode */
#exams-toggle-btn:hover {
    background: var(--color-white) !important;   /* statt #fff */
    box-shadow: 0 1rem 1.6rem var(--color-light);
    transform: translateY(-2px);
}

/* === iPad-Finetuning (Portrait + Landscape) === */
/* Ziel: ~768–1024 px */
@media (min-width: 768px) and (max-width: 1024px) {

  /* Header kompakter, damit nichts umbrecht */
  header, header .navbar {
    padding: 0 0.8rem;
  }

  header .logo img {
    width: 4.2rem;
    height: 4.2rem;   /* kleiner als Desktop, damit mehr Platz für Nav bleibt */
  }

  /* Navbar: nur Icons zeigen, horizontal scrollbar statt Umbruch */
  header .navbar {
    gap: 0.4rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    max-width: 65vw;   /* verhindert Überschieben der Theme-Toggle/Profil-Buttons */
  }
  header .navbar a {
    margin-left: 0.6rem;
    padding: 0 0.8rem;
    height: 3.2rem;
  }
  header .navbar a h3 {    /* Text ausblenden → nur Icon */
    display: none;
  }
  header .navbar a:hover { /* kein „Hochschieben“ beim Hover auf iPad */
    padding-top: 0;
  }

  /* Platz unter dem fixen Header etwas erhöhen (dein Header ist fixed) */
  .container {
    padding-top: 7.2rem; /* vorher 6rem in deinen iPad-Styles, hier etwas mehr Luft */
    margin: 0 0.8rem;
  }

  /* Sidebar nie fixed (du hast das in @max-width:1024 schon – hier doppelt, falls der andere Block übergangen wird) */
  aside .profile {
    position: static !important;
    width: 100%;
  }

  /* Main: Subjects-Karten etwas schmaler, damit 3–4 pro Screen passen */
  :root {
    --subjects-card-w: 220px; /* Desktop 250px → iPad 220px */
    --subjects-gap: 1.2rem;
  }
  main .subjects {
    padding: 0.6rem 0 0.8rem 0.2rem;
  }
  main .subjects h3 {
    font-size: 0.95rem;
  }

  /* „Latest Exams“ Header + Tabelle: full-bleed Optik + horizontales Scrollen */
  .timetable {
    margin-left: -0.8rem;
    margin-right: -0.8rem;
  }
  .timetable > div {
    width: 100%;
    padding: 0 0.8rem;
    box-sizing: border-box;
  }
  .timetable table {
    display: block;
    width: 100%;
    min-width: 640px;   /* etwas breiter als dein 560px-Default für bessere Lesbarkeit */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    border-radius: 0.6rem; /* behält die Kartenoptik bei */
  }
  .timetable table th,
  .timetable table td {
    padding: 0.9rem 1rem;
  }

  /* Rechte Spalte unter Main, volle Breite – falls das andere Media-Query mal nicht greift */
  .right {
    grid-column: 1 / -1;
    order: 3;
    min-width: 0;
    margin-top: 0.6rem;
  }
  main { order: 2; }
  aside { order: 1; }

  /* Partner/Announcements: keine „Überläufe“ an den Kanten */
  .right .partner-products,
  .right .announcements {
    overflow: hidden;
  }

  /* Footer darf Inhalte nicht überlagern (du stellst ihn bei <=1024 schon auf static um) */
  .footer-dark {
    position: static !important;
  }
}

/* Extra: sehr schmale iPad-Portrait-Apps (~768–820 px) noch etwas straffen */
@media (min-width: 768px) and (max-width: 880px) {
  header .theme-toggler { display: none; }   /* mehr Platz für Nav-Icons */
  #profile-btn { margin-right: 0.6rem; }
  :root { --subjects-card-w: 200px; }
}
/* === Kompakter Footer für mobile & iPad === */
@media (max-width: 1024px) {

  .footer-dark {
    position: static !important;   /* verhindert Überlagerung */
    padding: 1rem 0.8rem !important;  /* weniger vertikaler Platz */
    font-size: 0.85rem;            /* leicht kleinere Schrift */
    line-height: 1.3;
  }

  .footer-dark .container,
  .footer-dark .row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }

  .footer-dark .item {
    width: 100%;
    margin-bottom: 0.4rem;
  }

  .footer-dark h3,
  .footer-dark h4 {
    margin-bottom: 0.2rem;
    font-size: 0.95rem;
  }

  .footer-dark ul {
    margin: 0;
    padding: 0;
  }

  .footer-dark ul li {
    margin-bottom: 0.2rem;
  }

  .footer-dark p,
  .footer-dark a {
    font-size: 0.8rem;
  }

  .footer-dark .copyright {
    margin-top: 0.8rem;
    text-align: left;
    font-size: 0.75rem;
    opacity: 0.7;
  }
}
/* === Footer: nicht sticky/fixed, kompakt, überlappt nichts === */
.footer-dark {
  position: static !important;   /* statt fixed */
  bottom: auto; left: auto;
  width: 100%;
  padding: 12px 10px;            /* kompakter als 25px */
  font-size: 0.85rem;
  line-height: 1.3;
  z-index: auto;                  /* keine Überdeckung */
}

/* Links eng, aber klickbar */
.footer-dark .footer-links {
  gap: 0.25rem;
}

.footer-dark .footer-copy {
  font-size: 0.78rem;
  opacity: 0.75;
}

/* noch etwas straffer auf iPad/Handy */
@media (max-width: 1024px) {
  .footer-dark {
    padding: 10px 8px;
    font-size: 0.82rem;
    line-height: 1.25;
  }
}
/* === Desktop: Footer immer ganz unten, ohne fixed === */
@media (min-width: 1200px) {
  html, body { height: 100%; }

  /* Body spannt die volle Höhe und stapelt: Header | Content | Footer */
  body {
    min-height: 100dvh;            /* sicheres 100vh auch mit Browser-UI */
    display: flex;
    flex-direction: column;
  }

  /* Dein Hauptbereich (Content) nimmt den verfügbaren Platz ein */
  /* Nimm hier den Wrapper, der den Content trägt – beide Regeln sind ok */
  .container, main {
    flex: 1 0 auto;                /* dehnt sich */
    min-height: 0;                 /* verhindert Overflow-Quetschen */
  }

  /* Footer hängt nie in der Luft, ohne sticky/fixed zu sein */
  .footer-dark {
    position: static !important;   /* falls zuvor fixed/sticky gesetzt war */
    margin-top: auto;              /* schiebt ihn an das untere Seitenende */
  }
}
/* === iPad (Portrait + Landscape): Latest Exams soll den Platz nutzen === */
@media (min-width: 768px) and (max-width: 1024px) {

  /* Section wirklich vollbreit, aber nicht enger als der Screen */
  .timetable {
    margin-left: -0.8rem;
    margin-right: -0.8rem;
  }

  /* WICHTIG: echte Tabellen-Geometrie nutzen, keine Block-Box */
  .timetable table{
    display: table;       /* statt display:block */
    width: 100%;
    table-layout: auto;   /* Browser verteilt Spalten sinnvoll */
    white-space: normal;  /* Text darf umbrechen -> keine “quetsch”-Optik */
    min-width: unset;     /* überschreibt frühere Mindestbreite */
    max-width: none;      /* sicherheitshalber */
    padding: 1.2rem;      /* etwas kompakter als card-padding */
  }

  /* etwas mehr Luft, aber nicht verschwenderisch */
  .timetable table th,
  .timetable table td{
    padding: 0.8rem 1rem;
  }

  /* optionale Richtwerte pro Spalte, damit nichts absurd klein wird */
  .timetable thead th:nth-child(1) { width: 12ch; } /* Test ID */
  .timetable thead th:nth-child(2) { width: 22ch; } /* Subject */
  .timetable thead th:nth-child(3) { width: 8ch; }  /* Grade */
  .timetable thead th:nth-child(4) { width: 16ch; } /* Date */
}

/* Falls die „mobile“ Scroll-Variante vorher greift: für iPad wieder aus */
@media (min-width: 768px) and (max-width: 1024px) {
  .timetable table {
    overflow-x: visible;          /* kein Horizontal-Scroll auf iPad */
    -webkit-overflow-scrolling: auto;
  }
}



/* =============================
   UNIFIED LEGAL FOOTER (v1)
   Applied identically to style.css and exam.css
   ============================= */

html, body { height: 100%; min-height: 100%; }
body{
  display: flex;
  flex-direction: column;
  min-height: 100svh;                 /* mobile-safe viewport */
}
@supports (min-height: 100dvh){
  body { min-height: 100dvh; }
}
main { flex: 1 0 auto; min-height: 0; }

/* Footer */
.footer-dark {
  position: static !important; /* never fixed/sticky */
  margin-top: auto;
  flex-shrink: 0;
  width: 100%;
  background: #1e212e;
  color: rgba(255,255,255,.82);
  text-align: center;
  padding: 14px 10px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  line-height: 1.4;
  font-size: .85rem;
}

.footer-inner {
  max-width: 900px;
  margin: 0 auto;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3rem .75rem;
}

.footer-links li {
  display: inline-flex;
  align-items: center;
}

.footer-links li::before {
  content: "·";
  padding: 0 8px;
  color: rgb(255, 255, 255);
}

.footer-links li:first-child::before {
  content: "";
  padding: 0;
}

.footer-links a {
  color: rgba(255,255,255,.85);
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-copy {
  margin: 0;
  color: rgb(255, 255, 255);
  font-size: .78rem;
}

/* Responsive tweaks */
@media (max-width: 600px) {
  .footer-dark {
    padding: 10px 8px;
    font-size: .82rem;
    line-height: 1.3;
  }
}

/* Safety: isolate layout/paint for footer */
footer.footer-dark { contain: layout paint; }

/* Show-more wirklich mittig + keine „verstreuten“ Punkte mehr */
#timetable .exams-show-more{
  display:flex;
  width:100% !important;
  justify-content:center !important;
  align-items:center;
  gap:0 !important;
  margin-top:.6rem;
  font-size:0;                 /* versteckt evtl. Textknoten "..." */
}
#timetable .exams-show-more::before{ content:none !important; }  /* Safety */

#exams-toggle-btn{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:3rem; height:2.2rem;
  border-radius:.6rem;
  border:1px solid var(--color-light);
  background:var(--color-white);
  box-shadow:var(--box-shadow);
  cursor:pointer;

  color:transparent;           /* Button-Text ausblenden */
  font-weight:900;
  font-size:1.35rem;           /* wird gleich wieder aktiv */
  line-height:1;
  letter-spacing:.25rem;
}
#exams-toggle-btn::before{
  content:'•••';               /* die drei dicken Punkte IM Kasten */
  color:var(--color-dark);
  font-size:1.35rem;
}
/* Header-Hover: Unterstreichung wächst aus der Mitte (ohne Layout-Shift) */
header .navbar a{
  position: relative;                /* hast du schon – hier zur Sicherheit */
  transition: color .25s ease;
}

header .navbar a::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.35rem;                   /* Abstand zur Unterkante des Links */
  width: 60%;                        /* Länge der Linie */
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;

  transform: translateX(-50%) scaleX(0);
  transform-origin: 50% 50%;
  transition: transform .25s ease;
}

/* Aktivierung bei Hover + Tastaturfokus */
header .navbar a:hover::after,
header .navbar a:focus-visible::after{
  transform: translateX(-50%) scaleX(1);
}

/* Optional: etwas Farbfeedback ohne Springen */
header .navbar a:hover,
header .navbar a:focus-visible{
  color: var(--color-primary);
}
/* === MOBILE FIX: iPhone & Smartphones < 600px === */
@media (max-width: 600px) {

  header {
    padding: 0 0.6rem;
  }

  /* Logo kleiner machen → mehr Platz für Navbar */
  header .logo img {
    width: 3.8rem;
    height: 3.8rem;
  }

  /* Navbar als horizontale Scroll-Leiste (verhindert Abschneiden) */
  header .navbar {
    max-width: 70vw;               /* Platz für Toggle + Profile */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.6rem;
    scrollbar-width: none;         /* Firefox */
  }
  header .navbar::-webkit-scrollbar { display: none; }

  /* Text ausblenden → nur Icons → viel kompakter */
  header .navbar a h3 {
    display: none;
  }

  header .navbar a {
    padding: 0 0.6rem;
    margin-left: 0.6rem;
    height: 3rem;
  }

  /* Theme-Toggle etwas kleiner */
  header .theme-toggler {
    transform: scale(0.85);
    margin-right: 0.4rem;
  }

  #profile-btn {
    margin-right: 0.4rem;
  }

  /* Platz unter dem Header erhöhen */
  .container {
    padding-top: 5.5rem !important;
  }
}

/* === iPad FIX: Sidebar oben kleben, aber nicht über Inhalte schieben === */
@media (min-width: 768px) and (max-width: 1024px) {

  aside .profile {
    position: sticky !important;
    top: 6.2rem;                /* Platz für deinen fixed Header */
    width: 14rem;               /* gleich wie Desktop */
    z-index: 10;                /* über Main aber unter Header */
  }

  /* Sidebar wieder in linke Spalte setzen */
  .container {
    display: grid !important;
    grid-template-columns: 14rem 1fr !important;
  }

  /* Reihenfolge korrigieren: Aside wieder links */
  aside { order: 0 !important; }
  main { order: 1 !important; }
  .right { order: 2 !important; }
}
/* === iPad FIX: Latest Exams soll volle Breite nutzen === */
@media (min-width: 768px) and (max-width: 1024px) {

  /* Container zentriert & nicht full-bleed */
  .timetable {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Tabelle echte Tabellen-Layout-Geometrie */
  .timetable table {
    display: table !important;
    table-layout: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-x: visible !important;
  }

  /* Spalten dürfen breit werden → kein Zusammenquetschen */
  .timetable table th:nth-child(1) { width: 12ch; }
  .timetable table th:nth-child(2) { width: auto; }
  .timetable table th:nth-child(3) { width: 8ch; }
  .timetable table th:nth-child(4) { width: 16ch; }
}

/* === FIX: Latest Exams soll auf iPad und Desktop volle Breite nutzen === */
@media (min-width: 768px) {

  /* Section soll NICHT eingerückt sein */
  .timetable {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  /* Box soll nicht mittig schmal werden */
  .timetable table {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    table-layout: auto !important;
    white-space: normal !important;

    overflow-x: visible !important;
    border-radius: var(--card-border-radius) !important;
  }

  /* Kein künstliches „Card zentrieren“ */
  .timetable table {
    margin: 0 !important;
  }

  /* Zellen schön lesbar */
  .timetable table th,
  .timetable table td {
    padding: 0.9rem 1.2rem !important;
  }

}

/* === iPad Pro FIX: Sidebar bleibt links & klebt oben === */
@media (min-width: 1024px) and (max-width: 1366px) {

  /* Hauptgrid: klassische 2-Spalten-Struktur */
  .container {
    display: grid !important;
    grid-template-columns: 14rem 1fr !important;
    gap: 1.6rem !important;
    padding-top: 6rem !important; /* Platz für fixed Header */
  }

  /* Sidebar wieder echte linke Spalte */
  aside {
    order: 0 !important;
  }

  /* Sidebar selbst sticky machen */
  aside .profile {
    position: sticky !important;
    top: 6rem;                /* Höhe des Headers */
    width: 14rem !important;
    height: auto;
    z-index: 5;               /* oberhalb des Contents */
  }

  /* Content darf sich normal scrollen */
  main, .right {
    order: 1;
    min-width: 0;
  }

  /* Verhindert Überlappung & Seitwärts-Verschieben */
  aside .profile, aside {
    overflow: visible !important;
  }

}
.container {
    padding-top: 4rem !important;
}

/* FIX: Right-Side immer zentriert & vollbreit halten */
@media (max-width: 1400px) {
    .right {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    .right > * {
        width: 100% !important;
    }
}