/* ------------------------------------------------------------------------------ */
/* ****************************************************************************** */
/* --------- (C) Copyright 2024/2025 by machtWeb | Reinhard Lange --------------- */
/* ---------------------- machtWeb.de | relaXits@machtWeb.de -------------------- */
/* ------------------------------------------------------------------------------ */
/* update	->						                                          6.00/04 - 14-12-24
/* layout	-> startpage									                                          */
/* use-in   -> tools/main/function/modal.add.php                                  */
/* file 	-> design/modal.css	    					                                      */
/* ------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/04 - 14-11-24 */
/* MODAL - full screen !!!                                                        */
/* jquery -> must NOT be activated / NO javascript                                */
/* use    -> tools/main/function/modal.add.php                                    */
/* https://codepen.io/Jemimaabu/pen/wvRamVN - 28-08-2023                          */
/* ------------------------------------------------------------------------------ */
/* MODAL */
/* NOT IN USE -> info and icon in NAV */
/*
.modal-btn {
  display:inline-flex;
  width:36px;
  height:36px;
  margin:0 8px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border: 2px solid #9f0f31;
  background-color: #a00332;
  color: #fcfcfc;
  transition: background-color 250ms, border-color 250ms;
  text-decoration: none;
}
.modal-btn:hover,
.modal-btn:focus {
  background-color: #9f0f31;
  border-color: #6f094c;
}
.modal-btn i {font-size:2rem;line-height:1;}
*/

/* ------------------------------------------------------------------------------ */
/* !!! DO NOT TOUCH !!! modal position */
.modal {
    position:fixed;
    display:flex;
    top:0;
    left:0;
    min-height:100vh;
    width:100%;
    z-index:99999; /* self 2; */
  }
  /* !!! DO NOT TOUCH !!! */
  .modal:not(:target) {visibility:hidden; transition-delay:500ms; transition-property:visibility;}
  .modal:target .modal-content {transform:translateY(100vh);animation:500ms ease-in-out slideUp forwards;}
  .modal:not(:target) .modal-content {transform:translateY(0);animation:500ms ease-out slideDown forwards;}
  .modal:target .modal-overlay {opacity:0;animation:500ms linear fadeIn forwards;}
  .modal:not(:target) .modal-overlay {opacity:1;animation:500ms linear fadeOut forwards;}
  
  /* modal overlay */
  .modal-overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(0,0,0,.4);
    transition:opacity 500ms ease;
  }
  /* modal content */
  .modal-content {
    position:relative;
    width:75%;
    max-width:1024px;
    height:75%;
    margin:auto;
    padding:1.4rem 1rem;
    background:var(--col-ff);
    border:1px solid var(--box-col-border);
    border-radius:var(--box-radius);
    box-shadow:var(--box-shadow);
    transition:transform 1s;
  }
  /* modal inote */
  .modal-inote {
    margin:.8rem 1.2rem 0 1.2rem;
    padding:0;
    border:1px solid var(--color-primary);
    border-width: 0 0 0 8px;
    resize:vertical;
    overflow:auto;
  }
  /* modal title */
  .modal-title {
    margin:0;
    padding:0 1rem;
    border:1px solid var(--color-primary);
    border-width:0 0 1px 0;
    color:var(--col-70);
  }
  /* modal subtitle */
  .modal-subtitle {
    text-transform:none;
  }
  .modal-text {
    padding:.2rem 1rem;
    font-size:1.2rem;
  }
  /* modal marker for dates only */
  .modal-marker {
    padding:1px 4px;
    background:rgb(0,0,0,.06);
    border:1px solid red;
    border-width:0 0 1px 0;
  }
  /* modal marker for date reopen only */
  .modal-marker-reopen {
    border:1px solid var(--color-primary);
    border-width:0 0 1px 0;
  }
  /* modal hint to close */
  .modal-text-small {
    display:inline-block;
    width:100%;
    padding:4px 0;
    font-size:.85rem;
    text-align:center;
    border:1px solid #ccc;
    border-width:1px 0 0 0;
  }
  /* modal image - right */
  .modal-image {
    margin:.5em 0 .5em 1em; 
    float:right;
    border-radius: var(--box-bdr-rnd);
  }
  
  /* !!! DO NOT TOUCH !!! modal close "X" -> × */
  .modal-close {
    position:absolute;
    top:8px;
    right:24px;
    font-size:3rem;
    text-decoration:none;
    color:inherit;
  }
  .modal-close:hover{
    color:red;
  }
  
  .modal-divider {
    height: 1px;
    margin: 1rem 0; /* Abstand oben und unten */
    background-color: var(--color-primary); /* Farbe der Linie */
    opacity: 0.5; /* Optional: Transparenz */
  }
  
  /* !!! DO NOT TOUCH !!! anmiations */
  @keyframes fadeOut {from {opacity:1;} to {opacity:0;}}
  @keyframes fadeIn {from {opacity:0;} to {opacity:1;}}
  @keyframes slideUp {from {transform:translateY(100vh);} to {transform:translateY(0);}}
  @keyframes slideDown {from {transform:translateY(0);} to {transform:translateY(100vh);}}
  
  /* !!! within NAV !!! */
  /* add class for icon only !!! */
  .icon-adjust {
    position:relative;
    top:-1px;
    margin-left:8px;
    vertical-align:middle;
    color:red;
  }
  .footer-icon {color:#fff !important;}

  /* icon hover-color */
  li a:hover .icon-adjust   {color:var(--col-ff);}
  /* icon and link - hover-color */
  li a:hover                {color:inherit;}
  
  /* Anpassung für Smartphones */
  @media screen and (max-width: 768px) {
    .modal-content {
      width:85%;
      /* height: auto; /* Höhe passt sich dem Inhalt an */
      margin:2rem auto;
      padding:.2rem;
      border-radius:8px;
    }
    .modal-inote    {border-width:0 0 0 2px;}
    /* image */
    .modal-image    {display:none;}
    /* hr-line */
    .modal-divider  {display:none;}
  }

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/04 - 09-12-24 */
/* CALENDAR - within MODAL - full screen !!!                                      */
/* jquery -> must NOT be activated / NO javascript                                */
/* use    -> tools/main/function/modal.add.php                                    */
/* https://codepen.io/machtweb/pen/LYwOPVr - 27-10-2024                           */
/* ------------------------------------------------------------------------------ */
.calendar {
    display: flex; /* Flexbox aktivieren */
    flex-wrap: wrap; /* Elemente in die nächste Zeile umbrechen */
    justify-content: space-between; /* Abstand zwischen den Monaten */
    margin: 16px; /* Abstand um die Kalender */
}

.month {
    flex: 1 1 300px; /* Mindestbreite von 300px für jedes Monat */
    margin: 6px; /* Abstand um jedes Monat */
    border: 1px solid #ccc; /* Rahmen für jedes Monat */
    padding: 6px; /* Innenabstand für jedes Monat */
    border-radius: 6px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Leichte Schatten */
}

.days {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, 40px);
    gap: 4px; /* Vertikale und horizontale Lücken */
    margin-bottom: 4px;
    justify-content: center;
}

.day,
.header {
    width: 40px; /* Feste Breite für die Tage und Header */
    height: 40px; /* Feste Höhe für die Tage und Header */
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    font-size: 14px;
    border: 1px solid #ccc; /* Rahmen für jeden Tag */
    border-radius: 4px; /* Abgerundete Ecken */
}

/* Anpassung der Header-Zellen für die Wochentage */
.header {
    font-weight: normal; /* Keine fettgedruckte Schrift */
    text-align: center; /* Zentrieren der Wochentage */
    background-color: #f0f0f0; /* Hintergrund für Header */
}

/* Leerzellen für nicht vorhandene Tage */
.empty {
    visibility: hidden; /* Unsichtbar */
}

/* Hervorhebung für den definierten Zeitraum */
.highlight {
    border-bottom: 2px solid red !important; /* Roten Rahmen für hervorgehobene Tage */
}

/* Monatsrahmen korrekt zentrieren */
.month h2 {
    margin-bottom: 10px; /* Abstand unter der Monatsüberschrift */
    font-size: 18px; /* Schriftgröße */
    text-align: center; /* Monatsüberschrift zentrieren */
}

.day {
    position: relative; /* Für Tooltip-Positionierung */
}

/* Tooltip für die Tage */
.day[data-tooltip]::after {
    content: attr(data-tooltip); /* Tooltip-Inhalt */
    position: absolute;
    bottom: 100%; /* Tooltip über der Zelle */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(220, 220, 220, 0.6);
    color: #000;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #aaa; /* Rahmen für Tooltip */
    white-space: nowrap; /* Keine Zeilenumbrüche im Tooltip */
    z-index: 10; /* Tooltip z-Index */
    visibility: hidden; /* Unsichtbar standardmäßig */
    opacity: 0; /* Unsichtbar */
    transition: opacity 0.2s, visibility 0.2s; /* Übergangseffekte */
    font-size: 16px; /* Schriftgröße des Tooltips */
    cursor: pointer; /* Cursoranzeige beim Hover */
}

.day[data-tooltip]:hover::after {
    visibility: visible; /* Tooltip sichtbar beim Hover */
    opacity: 1; /* Voll sichtbar */
    background-color: rgba(200, 200, 200, 0.9); /* Tooltip-Hintergrundfarbe */
}

.day[data-tooltip]:hover {
    background-color: rgba(200, 200, 200, 0.45); /* Hintergrundfarbe beim Hover */
}

/* Feiertage rot darstellen */
.holiday {
    color: red;
    position: relative; /* Für den Tooltip */
}

/* Tooltip bei Hover anzeigen */
.holiday:hover::after {
    content: attr(data-tooltip); /* Den Tooltip-Text einfügen */
    position: absolute;
    top: -20px; /* Position des Tooltips */
    left: 50%;
    transform: translateX(-50%);
    background-color: #000;
    color: #fff;
    padding: 5px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
}

/* Wochenende rot darstellen */
.weekend {
    color: red;
}

/* Styling für besondere Tage */
.specialday {
    border-bottom: 2px solid #808080; /* Dunkler grauer Border */
    background: rgba(128, 128, 128, 0.1); /* Leicht grauer, transparenter Hintergrund */
}

/* Hintergrund und Rand für den aktuellen Tag */
.current-day {
    background-color: #e0e0e0; /* Dunkleres Grau */
    border: 1px solid #b0b0b0; /* Grauer Rand */
    border-width: 1px 2px 2px 1px;
    border-right-color:var(--color-primary);
    border-bottom-color:var(--color-primary);
}

/* Tooltip für den aktuellen Tag */
.current-day[data-tooltip]::after {
    content: none; /* Keine Tooltip-Anzeige für aktuellen Tag */
}

/* Tooltip nur für spezielle Tage */
.specialday[data-tooltip]::after {
    visibility: hidden; /* Standardmäßig unsichtbar */
    opacity: 0; /* Unsichtbar */
}

.specialday[data-tooltip]:hover::after {
    visibility: visible; /* Sichtbar bei Hover */
    opacity: 1; /* Voll sichtbar */
    transition: opacity 0.2s, visibility 0.2s;
    color: #000;
    cursor:auto;
}

/* Tooltips deaktivieren für normale Tage */
.day:not(.specialday) {
    pointer-events: none; /* Keine Tooltips für nicht-specialday */
}

/* Responsive: Kalender ausblenden auf Tablets und Smartphones */
@media (max-width: 1024px) {
    .calendar {
        display: none;
    }
}

/* ------------------------------------------------------------------------------ */
/* END */	
/* ------------------------------------------------------------------------------ */