/* name    style.css
 * desc      provides CSS style information for the index page
 * auth      Mrs. Sister
 * smvr     1 3 6 #  freeBSD grep  needs a space after plvl!
 * date      2026-01-13
 * page colours : blau: #7eaac7 beige: #fffaf2 braun: 
 * page font:  Carlito-Regular, Writing-colour: #4a3b2e
*/

:root {
    --spec-backgroundclr: #fffaf2;   /* cite, modals, footer */
    --inactive-fontclr: #4a3b2e;       /* inactive links?? */
    --active-fontclr: #7eaac7;
}

.internallink {
    font-weight:bold;
    color:#7eaac7; 
}

@media screen and (max-width: 719px) {
    body {
	--mdl-wdth: 140%; --mdl-spcl: 9px; --mdl-posr: -39px; 
	--space-left: 16px; --exspace-left: 28px; --t-lv: none;
	--ut-pddg: 17px;
	--impr-mrgn: 7px;
	--ofl-scrl: scroll;
	--ovl-scrl: contain; /* recommended for small mobiles (smart phones, little tablets*/
    }
    #kinfo, #pinfo, #minfo {
	height: 60vh;
    }
}
@media screen and (min-width: 720px) and (max-width: 1083px) {
    body {
	--mdl-wdth: 84%; --mdl-spcl: 20px; --mdl-posr: 19px; 
	--space-left: 40px; --exspace-left: 42px; --t-lv:block;
	--ut-pddg: 37px;
	--impr-mrgn: 40px;
	--ofl-scrl: auto;
	--ovl-scrl: auto;
    }
}
@media screen and (min-width: 1084px) {
    body {
	--mdl-wdth: 80%; --mdl-spcl: 20px; --mdl-posr: 19px; 
	--space-left: 100px; --exspace-left: 120px; --t-lv:block;
	--ut-pddg: 60px;
	--impr-mrgn: 99px;
	--ofl-scrl: auto;
	--ovl-scrl: auto;
    }
}

@font-face {
    Schriftfamilie: „Carlito“;
    src: url("Carlito/Carlito-Regular.ttf") format("truetype");
}

Körper {
    Schriftfamilie: gnu;
}
// <weight>: Use a value from 400 to 700px
// <uniquifier>: Use a unique and descriptive class name

.lora-<uniquifier> {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.lora-<uniquifier> {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}



html {
  scroll-behavior: smooth;
}


header {
  position: fixed;        /* Header bleibt an der gleichen Position, wenn man scrollt */
  top: 0;                     /* Der Header ist am oberen Rand des Viewports */
  left: 0;                     /* Der Header ist am linken Rand des Viewports */
  width: 100vw;         /* Der Header nimmt die gesamte Breite des Viewports ein (100% der Breite des sichtbaren Fensters) */
  height: 70px;          /* Der Header hat eine feste Höhe von 70px */
  background-color: white;    /* Der Hintergrund des Headers ist weiß */
  z-index: 100;           /* Stellt sicher, dass der Header über anderen Elementen liegt (falls sie sich überlappen) */

  display: flex;           /* Aktiviert Flexbox für das Layout des Headers */
  align-items: center;        /* Zentriert den Inhalt des Headers vertikal */
  justify-content: flex-end; /* Verteilt den Inhalt innerhalb des Headers so, dass der erste Inhalt an den linken Rand und der zweite Inhalt an den rechten Rand ausgerichtet wird */

  padding: 0 20px;            /* Fügt 20px Abstand links und rechts zum Inhalt des Headers hinzu */
  box-sizing: border-box;  /* Verhindert, dass Padding die Breite des Headers beeinflusst (berechnet die Größe des Elements inkl. Padding und Border) */
}



.header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* schiebt Navigation + PDF nach rechts */
  padding-right: 0;
  max-width: 100%;     /* statt 1200px */
  margin: 0;                 /* entfernt das automatische Zentrieren */
  gap: 20px;                 /* Abstand zwischen Navi & PDF */
  padding: var(--space-left);           /* Innenabstand 100 */ 
}



/* Navigation links */
nav {
  display: flex;
  gap: 40px;
  margin-left: auto;   /* ← DAS schiebt die Nav ganz nach rechts */
}


/* PDF-Logo rechts */
.logo-pdf,
.logo-fallback {
  height: 50px;
  width: 50px;
  display: var(--t-lv);
}


nav a {
  text-decoration: none;   /* Entfernt die Unterstreichung der Links */
  color: var(--inactive-fontclr);   /*  #4a3b2e;  Setzt die Textfarbe der Links auf ein dunkles Braun */
  font-weight: bold;       /* Macht den Text fett */
  font-size: 1rem;         /* Setzt die Schriftgröße auf 1rem */
  transition: color 0.3s ease; /* Fügt eine sanfte Übergangsanimation für die Farbe hinzu */
  padding: 10px 2px;       /* Fügt einen Innenabstand von 10px oben und unten und 2px links und rechts hinzu */
}


nav a:hover {
    color: var(--active-fontclr); /* #7eaac7; */
}

.zitat {
  text-align: center;
  height: 400px;
  background-color: #fffaf2;
  font-size: 20px;
  box-shadow: 0 5px 25px rgba(0,0,0,0.15);
  width: 60%;
  max-width: 1000px;
  margin: 0 auto;
  border-radius: 10px;

  display: flex;
  flex-direction: column;   /* <<< DAS IST DER FIX */
  align-items: center;
  justify-content: center;

  padding: 20px;
  box-sizing: border-box;
}


.zitat-hintergrund {
  background-image: url("HG.jpg");   /* dein Bild  -- bad needs responsiveness */
  background-size: cover;            /* Bild füllt den ganzen Bereich */
  background-position: center;       /* Motiv zentrieren */
  background-repeat: no-repeat;
  background-attachment: fixed;      /* Parallax-Effekt (optional) */

  padding-top: 250px;                /* Abstand zum Header */
  padding-bottom: 200px;             /* Höhe, wie weit das Bild reicht, !quatsch */
}


.zitat blockquote {
  font-size: 25px;          /* Größeres Zitat */
  font-family: "Lora", serif;  /* Beispiel – du nutzt diese Schrift bereits */
  font-weight: 400;
  margin-bottom: 15px;      /* Abstand zur Autorin */
}

.zitat .autor {
  font-size: 20px;          /* Kleiner als das Zitat */
  font-family: "Lora", serif;
  font-weight: 300;
  opacity: 0.8;             /* Optional – macht es etwas "leichter" */
}


/*--------------------------Body----------------------------- */
body {
  font-family: "Carlito";
  color: #4a3b2e;
  margin: 0;
  padding: 0;  /* Seitenabstand aller Elemente 100px */
}


/* Text von ,,Über mich" */
.ueber {
    color: #4a3b2e;
    line-height: 1.85;          /* Zeilenhöhe */
    display: flex;               /* Flexbox aktivieren */
    flex-direction: column;      /* Elemente untereinander anordnen */
    justify-content: center;     /* vertikal zentrieren */
    align-items: center;         /* horizontal zentrieren */
    text-align: center;          /* Text innerhalb der Elemente zentrieren */
    padding: 60px var( --exspace-left);         /* Innenabstand 120 */
    padding-top: 17px;           /* optional */
}



/* -------- Neues Über-mich Layout -------- */
.ueber-wrapper {
  margin: 100px auto;      /* gleiche Außenabstände wie Zitatbox oben/unten */
  max-width: 1400px;
  padding: 0 var( --space-left);        /* horizontaler Abstand links/rechts wie bei Zitatbox 100 */
  box-sizing: border-box;
}



/* Container für Bild + Text */
.ueber-container {
    display: flex;
    align-items: stretch;   /* Bild & Text werden gleich hoch */
    gap: 60px;              /* Abstand zwischen Bild & Text */
    flex-wrap: wrap;        /* für kleine Bildschirme */
}



/* Bild links */
.ueber-bild {
    flex: 1;
    min-width: 350px;
    margin-left: 0;         /* bündig mit Zitat-Box */
}


.ueber-bild img {
    width: 100%;
    height: 100%;           /* Bild füllt Höhe des Containers */
    border-radius: 10px;
    object-fit: cover;
}

/* Text rechts */
.ueber-text {
    flex: 1;
    min-width: 350px;
    background-color: #fffaf2;
    padding: var(--ut-pddg);          /* Innenabstand */
    border-radius: 10px;
    font-size: 20px;
    line-height: 1.8;
    color: #4a3b2e;

    display: flex;
    flex-direction: column;
    justify-content: center;  /* Text vertikal mittig */
    text-align: left;
    box-sizing: border-box;
    height: 100%;             /* passt Höhe an das Bild an */
}




/* Überschrift */
.ueber-text h3 {
  color: #7eaac7;
  margin-top: 0;
}




/* Text von ,,Kurse" */
.kurse {
  background-color: white;       /* weiße Box */
  color: #4a3b2e;                /* Textfarbe bleibt */
  line-height: 2;                    /* Zeilenabstand */
  border-radius: 10px;         /* Ecken rund (optional) */
  margin: 10px 0;                /* Abstand oben/unten */
  box-sizing: border-box;     /* saubere Berechnung */
  font-family: Carlito;
  font-size: 18px;
  padding: 60px var( --exspace-left); /*Seitenabstand gleich wie über mich box 120 */
}



/* Unterteilungen Boxen Website */
.ueber, .mantra {
  /* opacity: 0.5; <-- entfernen */
  background-color: rgba(255, 253, 249, 0.5); /* letzter Wert = Transparenz 0 = durchsichtig, 1 = voll */
  margin: 100px;
  margin-top: 100px; /* Abstand unter Header */
  font-family: Carlito;
  font-size: 18px;
  color: #4a3b2e; /* Textfarbe festlegen, damit sichtbar */
  padding: 60px var( --exspace-left); /*Seitenabstand gleich wie über mich box 120 */
}



/* Close Button */
.close {
  /*position: absolute;
  top: 10px; right: 20px; */
    float: right;
    margin: .1em .2em;
    font-size: 28px; font-weight: bold;
    cursor: pointer;
}




/* 1. Yoga Kurs ------------------------------------------------------------------------------------------------*/
.kurs-box.kurs-01-weiteres {
  background-color: #fffaf2;  /* beige */
  color: #4a3b2e;
  padding: 20px 40px;         /* Innenabstand */
  margin: 40px 0;
  border-radius: 10px;
  box-sizing: border-box;
  font-family: Carlito;
  font-size: 25px;
  line-height: 2;
}



/* Gemeinsame Kurs-Bild-Regel für alle Kurs-Boxen */
.kurs-box-bild img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}



/* Einheitliches Layout für alle Kurs-Boxen */
.kurs-box-content {
  display: flex;
  align-items: center;        /* Text und Bild vertikal zentrieren */
  gap: 30px;                  /* Abstand zwischen Text und Bild */
  flex-wrap: wrap;            /* für kleine Bildschirme */
}

.kurs-box-text {
  flex: 1;                    /* Bild und Text teilen sich den Platz 50/50 */
}

.kurs-box-bild {
  flex: 1;                    /* Bild und Text teilen sich den Platz 50/50 */
  min-width: 200px;           /* Bild darf nie kleiner als 200px werden */
}

/* Grundlayout jeder Kurs-Box */
.kurs-box {
    display: block;
    padding: 20px;
    background: #f0f0f0;
    border-radius: 8px;
    text-decoration: none;
    color: #000;
    transition: 0.2s;
}



/* entfernt hellblaue Farben wegen Verlinkung */
.kurs-box,
.kurs-box:link,
.kurs-box:visited,
.kurs-box:hover,
.kurs-box:focus,
.kurs-box:active {
    background-color: inherit; /* behält ursprüngliche Farbe */
    color: inherit;            /* verhindert Linkfarbe */
    text-decoration: none;      /* entfernt Unterstreichung */
    outline: none;             /* entfernt blauen Fokus-Rahmen */
    box-shadow: none;          /* entfernt Fokus-Schatten */
}



/* Personal Yoga/4.Yoga Kurs */
.kurs-box.kurs-04-weiteres {
  background-color: white;
  color: #4a3b2e;
  padding: 20px 40px;
  margin: 40px 0;
  border-radius: 10px;
  box-sizing: border-box;
  font-family: Carlito;
  font-size: 25px;
  line-height: 2;
}


/* macht Bild & Text nebeneinander */
.kurs-box.kurs-04-content {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

/* Bild links */
.kurs-box.kurs-04-bild {
  flex: 1;
  min-width: 200px;
}

.kurs-box.kurs-04-bild img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Text rechts */
.kurs-box.kurs-04-text {
  flex: 1;
}

/* Mantra --------------------------------------------------------------------------------------------------------------------------*/
.kurs-box.mantra-weiteres {
  background-color: white;
  color: #4a3b2e;
  padding: 20px 40px;
  margin: 40px 0;
  border-radius: 10px;
  box-sizing: border-box;
  font-family: Carlito;
  font-size: 25px;
  line-height: 2;
}

.kurs-box.mantra-content {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

/* Bild links */
.kurs-box.mantra-bild {
  flex: 1;
  min-width: 200px;
}

.kurs-box.mantra-bild img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Text rechts */
.kurs-box.mantra-text {
  flex: 1;
}



/* Kurs-01 - Kontent wie in anderen Boxen */
.kurs-box.kurs-01-content {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

/* Kurs-01 - Bild Container wie Kurs 04*/
.kurs-box.kurs-01-bild {
  flex: 1;
  min-width: 200px;
}

/* Kurs-01 – Bild exakt gleiche Größe wie Mantra & Kurs-04*/
.kurs-box.kurs-01-bild img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}


.kurs-box-content,
.kurs-box.kurs-04-content,
.kurs-box.mantra-content,
.kurs-box.kurs-01-content {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

.kurs-box-bild,
.kurs-box.kurs-01-bild,
.kurs-box.kurs-04-bild,
.kurs-box.mantra-bild {
    flex: 1;
    min-width: 250px;   /* gleiche Mindestbreite */
    max-width: 400px;   /* gleiche Maximalbreite (optional) */
}



/* Einheitliche Bildgröße für alle Kursboxen */
.kurs-box-bild img,
.kurs-box.kurs-01-bild img,
.kurs-box.kurs-04-bild img,
.kurs-box.mantra-bild img {
    width: 100%;
    height: 250px;       /* fixe Höhe */
    object-fit: cover;   /* schneidet zu, kein Verzerren */
    object-position: center; /* Bild hübsch zentriert */
    border-radius: 10px;
    display: block;
}


/* Zwischenüberschriften */
h2 {
  color: #7eaac7;
  font-family: Lora; /* oder Segoe Script*/
}

h3 {
  color: #7eaac7;
  font-family: Lora; /* oder Segoe Script*/
  font-size: 30px;
}


/* -------------------------- Terminbereich-------------------------- */
.kontakt {
  position: relative;

  background-size: cover;
  background-attachment: fixed;
  color: #4a3b2e;

  margin: 0;               /* geändert → volle Breite */
  padding: 60px 120px;
  border-radius: 0;        /* geändert → volle Breite */
  overflow: hidden;
  background-color: transparent; /* keine Farbe */
}



/* Halbtransparente Overlay-Schicht für bessere Lesbarkeit */
.kontakt::before {
  display: none; /* Overlay wird nicht mehr angezeigt */
}


/* Inhalt über das Overlay legen */
.kontakt > * {
  position: relative;
  z-index: 1;
}






/* Hover Button Kurse */
button {
  background-color: #c8a97e;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #7eaac7;
}

/* Hintergrund für das Kontaktformular */
.kontaktformular-hintergrund {
  background-image: url("HG.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  display: flex;
  flex-direction: column;     /* Inhalt untereinander */
  justify-content: center;    /* vertikal mittig im Abschnitt */
  align-items: center;        /* horizontal mittig */
  overflow: hidden;
  height: 1000px;             /* Höhe des Abschnitts */
  padding: 0 20px;            /* optional, horizontal etwas Abstand */
  box-sizing: border-box;
  position: relative;
}

/* Container für Formular + Text */
.kontaktformular-container {
  display: flex;
  flex-direction: column;      /* Text über iFrame */
  align-items: center;         /* horizontal mittig */
  justify-content: center;     /* vertikal mittig innerhalb Container */
  width: 100%;
  max-width: 900px;
  margin: 0;
  padding: 0;
}

/* Box für Text über dem iFrame */
.kontaktformular-text {
  text-align: center;
  font-size: 20px;
  color: #4a3b2e;
  margin-bottom: 30px;
}

/* iFrame */
.kontaktformular-container iframe {
  width: 100%;
  height: 1250px;
  border: none;
  display: block;
}





/* -------------------------Karte Google Maps------------------------ */
.maps-container {
  width: 100%;
  max-width: 400px;
  margin: 40px auto;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.maps-container iframe {
  width: 100%;
  height: 300px;
  border: 0;
}


/* ---------- Kontaktbereich mit Google Maps nebeneinander ---------- */
.kontaktbereich {
  display: flex;
  justify-content: space-between;
  align-items: center; /* vertikal zentriert */
  gap: 40px;
  margin: 40px 0;
  flex-wrap: nowrap; /* <--- wichtig, damit Text rechts bleibt */
  box-sizing: border-box;
  padding: 60px var( --exspace-left); /*Seitenabstand wie über mich box 120 */
}


/* Karte links */
.kontaktbereich .maps-container {
  flex: 1;
  max-width: 500px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  margin: 0;
}

.kontaktbereich .maps-container iframe {
  width: 100%;
  height: 350px;
  border: 0;
}


/* Kontakt rechts */
.kontaktbereich .kontakt-text {
  display: flex;
  flex-direction: column;
  justify-content: center; /* <--- vertikale Zentrierung innerhalb der Box */
  flex: 1;
  min-width: 300px;
  padding: 20px;
  border-radius: 10px;
  font-size: 20px;
  color: #4a3b2e;
  box-sizing: border-box;
}

/* Überschrift bündig links */
.kontaktbereich .kontakt h2 {
  text-align: left;
  margin-top: 0;
  margin-bottom: 10px;
  color: #7eaac7;
}

/* Responsive: Untereinander bei kleinen Bildschirmen */
@media (max-width: 800px) {
  .kontaktbereich {
    flex-direction: column;
  }

  .kontaktbereich .maps-container,
  .kontaktbereich .kontakt {
    max-width: 100%;
  }
}


/* Pfeil um nach oben zu gelangen */
.back-to-top {
  position: fixed;         /* immer sichtbar am Bildschirm */
  bottom: 30px;            /* Abstand vom unteren Rand */
  right: 30px;             /* Abstand vom rechten Rand */
  width: 50px;
  height: 50px;
  background-color: #7eaac7; /* Hintergrundfarbe */
  color: white;
  text-align: center;
  line-height: 50px;       /* Pfeil vertikal zentrieren */
  font-size: 2rem;         /* Größe des Pfeils */
  border-radius: 50%;      /* runde Form */
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  text-decoration: none;
  transition: background-color 0.3s, transform 0.3s;
  z-index: 1000;

}

.back-to-top:hover {
  background-color: #c8a97e;
  transform: translateY(-3px); /* kleiner Hover-Effekt */
}


.kontakt-text-wrapper {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw; /* volle Bildschirmbreite 120 */
  padding: 60px var( --exspace-left);
  box-sizing: border-box;
}


/* -----------------------------Footer------------------------------ */


footer {
  width: 100vw;          /* volle Breite des Viewports */
  position: relative;     /* Standardposition */
  left: 50%;
  margin-left: -50vw;     /* verschiebt die Box links an den Bildschirmrand */
  margin-top: 0;
  background-color: #e6dcc5;
  text-align: center;
  padding: 20px;
  font-size: 0.9em;
  box-sizing: border-box; /* optional, damit Padding sauber gerechnet wird */
}


footer a {
    color: #5C4033; /* Dunkelbraun */
    text-decoration: none; /* optional, Unterstreichung entfernen */
}

footer a:hover {
    color: #7eaac7; /* blau beim Hover */
}



/* ------------------ Impressum Box ------------------ */
.impressum {
  background-color: rgba(255, 253, 249, 0.9); /* <- Transparenz hier */
  margin: var(--impr-mrgn);
  font-family: Carlito;
  font-size: 18px;
  color: #4a3b2e;
  padding: 60px var( --exspace-left); /* 120 */
  border-radius: 10px;
  text-align: left;
}

.datenschutz {
  font-family: Carlito;
  font-size: 18px;
  color: #4a3b2e;
  text-align: left;
  line-height: 1.8;
}

.agbs {
  font-family: Carlito;
  font-size: 18px;
  color: #4a3b2e;
  text-align: left;
  line-height: 1.8;
}




/* -------------------------- Intro / Ladebildschirm -------------------------- */
/* Logo-Zoom-Animation beim Start     */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fffaf2;          /* weißer Hintergrund */
  display: flex;
  justify-content: center;          /* horizontal zentriert */
  align-items: center;              /* vertikal zentriert */
  z-index: 9999;                    /* liegt über allem */
  transition: opacity 1s ease;      /* sanftes Ausblenden */
}



/* Wenn ausgeblendet */
#loader.fade-out {
  opacity: 0;
  pointer-events: none;             /* macht klickbar, sobald verschwunden */
}



/* Startzustand Logo */
#loader img {
  max-width: 500px;                 /* Größe des Logos */
  height: auto;
  width: 150px; /* gewünschte Startgröße */
  transition: transform 2s ease-in-out, opacity 2s ease-in-out;
}

/* Klasse, die das Logo zoomt und ausblendet */
#loader img.zoom-out {
  transform: scale(4);  /* Zoomt auf dich zu */
  opacity: 0;            /* verschwindet */
}




/* Abstand Zwischenüberschriften und Text in Kurs-Boxen */
.kurs-box-text {
  display: block !important;      /* Flexbox-Einfluss entfernen */
}

.kurs-box-text h2 {
  margin: 0 !important;
}


.kurs-box-text p {
  line-height: 1.4 !important;
}


.kurs-box-text h2 + p {
  margin-top: 4px;
}

#notiz, #geburtstag {
  font-family: "Carlito";
}


#notiz {
    width: 700px;
}


/* Modal Hintergrund */
.modal {
  display: none;
  position: fixed;
  left: 0; top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  z-index: 3000;
}

/* Modal Inhalt */
.modal-content {
    display: block;
  /*  display: flow-root; */
  background: #fffaf2;
  margin: 5% auto;
  padding: 20px;
  width: 80%;
  height: 90vw;
  z-index: 9;
  max-width: 900px;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  position: relative;
  overflow-y: var(--ofl-scrl); 
  /* overscroll-behavior-y: var(--ovl-scrl);  */
}

.modal-content .close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 28px;
  cursor: pointer;
}

.scrollable {
    display: block;
    /*  display: flow-root; */
    overflow-y: var(--ofl-scrl);
    overscroll-behavior-y: var(--ovl-scrl);
}

#ktggl { display: none; }
label#kursid, label#persid, label#mantid, label#egeb {
    font-weight: 600;
    color: #7eaac7;
}

#kinfo, #pinfo, #minfo, #einfo {
    position: absolute;
    top: 15px;
    /* right:19px; */
    right: var(--mdl-posr);
    width: var(--mld-wdth);
    max-width: 900px;
    /* height: 60vh; */
    z-index: 8;
    font-size: 28;
    font-weight: 400;
    display: block;
    /*  display: flow-root; */
    color: #4a3b2e; 
    background: #fffaf2;
    margin: 5% auto;
    padding: 18px; /*  var(--mdl-spcl); */
    /* width: 97%; */
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    /* position: relative; */
    overflow-y: var(--ofl-scrl); 
    /* overscroll-behavior-y: var(--ovl-scrl);  */
  visibility: hidden;
}
input#ktggl, input#ptggl, input#mtggl, input#etggl { display: none; }
input#ktggl:checked  ~ #kinfo {
    visibility: visible;
}
input#ptggl:checked ~ #pinfo { visibility: visible; }
input#mtggl:checked ~ #minfo { visibility: visible; }
input#etggl:checked ~ #einfo { visibility: visible; }