body {

    font-family: Arial, sans-serif;
    color: #333;
    background-color: #f8efe1;
    margin: 0;
    font-size: 14px;
}

.container {
    max-width: 950px;
    margin: 0 auto;
    font-size: 14px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(226, 88, 29, 0.3);
    background-color: #f8f3ee;
    border-collapse: collapse;
    border: 1px solid rgb(255, 255, 255);

}
a {
    color: #1c67bd;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

header {


    text-align: left;
    color: #4a4a4a;

}

h1 {
    font-size: 20px;
    margin: 0;
}


.subheading {
    font-weight: bold;
    background-color: #dddddd;
    padding: 5px 10px;
}
/* Styles für die Inhaltsbox */
.content-box {
    min-width: 200px; /* Breite der Inhaltsbox anpassen */
}


main {
    margin-top: 20px;
}

#tools {
    display: flex;
    flex-wrap: wrap;
}

.box {
    flex: 0 0 calc(21% - 20px);
    background-color: #f9f9f9;
    padding: 5px;
    margin: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.box h3 {
    background-color: #faead3;
    color: 667bca;
    padding: 10px;
    margin: 0;
    transition: color 0.3s;
}

.box:hover h3 {
    color: #1c67bd;
}

.box p {
    margin: 10px 0;
}

#content {
    margin-top: 20px;
}

blockquote {

    border-left: 3px solid #ffd699;
    border-right: 3px solid #ffd699;
    padding: 10px;
    background-color: #fffefd;
}

ul {
    margin-left: 20px;
}
ul li {
    list-style-image: url('../images/main/square-orange-icon.png');
  }

table {
    width: 100%;
    margin-top: 10px;
}

table th,
table td {
    padding: 5px;
    vertical-align: top;
}

footer {
    background-color: #f2f2f2;
    padding: 10px;
    text-align: center;
    color: #333;
    margin-top: 20px;
}

footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

footer ul li {
    display: inline-block;
    margin-right: 10px;
}

footer ul li a {
    color: 667bca;
    text-decoration: none;
}

footer ul li a:hover {
    color: orange;
}

footer ul li a:visited {
    color: 667bca;
}
/* Formular-Styling für den QR-Code-Generator */
form {
  display: flex;
  flex-direction: column;
  max-width: 400px;
  margin: 0 auto;
}

label {
  font-weight: bold;
  margin-top: 10px;
}

input[type="text"],
input[type="number"],
select {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 4px;
  width: 5;
}

input[type="color"] {
  padding: 0;
}

button[type="submit"] {
  padding: 10px 20px;
  background-color: #337ab7;
  color: #fff;
  border: none;
  border-radius: 4px;
  margin-top: 10px;
  cursor: pointer;
}

/* Optionales Styling für den QR-Code */
#qrcode {
  margin-top: 20px;
  text-align: center;
}
 h2 {
            margin-top: 10px;
            font-size: 16px;
            color: #b4710c;
        }
        h3 {
            margin-top: 10px;
            font-size: 14px;
        }
        h5 {
            margin-top: 10px;
            font-size: 12px;
            color: #b4710c;
        }
        .section {
            margin-bottom: 10px;
        }

        .box {
            background-color: #f5f5f5;
            padding: 20px;
            border-radius: 5px;
            margin-bottom: 20px;
        }

        .faq {
            margin-bottom: 20px;
        }

        .faq-question {
            font-weight: bold;
			font-size: 14px;
            color: #222;
            margin-bottom: 10px;
        }

        .faq-answer {
            margin-top: 10px;
			 font-size: 14px;
            color: #bf9218;
            margin-bottom: 5px;
        }

  
  .form-group {
      margin-bottom: 10px;
    }

    .output {
      margin-top: 20px;
    }

    .output label {
      display: block;
      margin-bottom: 5px;
    }

    .output input[type="text"] {
      width: 100%;
      max-width: 300px;
      padding: 10px;
      font-size: 14px;
    }

    /* Stil für den Button */
    .styled-button {
      padding: 10px 20px;
      background-color: #337ab7;
      color: #fff;
      border: none;
      border-radius: 4px;
      margin-top: 10px;
      cursor: pointer;
    }

    /* Neuer Stil für Checkboxen */
    .checkbox-group {
      display: flex;
      flex-wrap: wrap;
      justify-content: left;
      margin-top: 5px;
	  margin: 10px;
	  color: 667bca;
    }

    .checkbox-group label {
      margin: 10px;
    }
	 .input-container input[type="text"],
  .input-container select {
    width: 200px;
    height: 30px;
    font-size: 14px;
  }
  .icon-container {
  text-align: center;
  font-size: 48px;
}

button {
  margin: 10px;

}

.next-question-form {
  text-align: center;
  margin-top: 20px;
}
 
.correct {
        color: green;
		  font-weight: bold;
    }
.wrong {
        color: red;
		  font-weight: bold;
    }
	
#image-container {
      max-width: 500px;
      margin: 0 auto;
    }
    #image-preview {
      max-width: 100%;
      height: auto;
      margin-bottom: 20px;
    }
    .button {
      display: inline-block;
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      margin-right: 10px;
    }
    .button:hover {
      background-color: #0056b3;
    }
    #crop-button,
    #resize-button,
    #filter-button,
    #effects-button {
      display: none;
    }
	
	
	 .color-box {
      width: 200px;
      height: 200px;
      border: 1px solid black;
      margin-bottom: 10px;
    }

    .input-container {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }

    .input-label {
      margin-right: 5px;
    }

    .color-input {
      width: 100px;
      padding: 5px;
      font-size: 14px;
    }

    #color-picker {
      width: 100px;
      height: 100px;
    }
	
	
	  .input-container {
      margin-bottom: 10px;
    }

    .input-label {
      margin-right: 5px;
    }

    .unit-input {
      width: 100px;
      padding: 5px;
      font-size: 14px;
    }
	 .time-column {
            font-weight: bold;
            color: orange;
        }
		 table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #ffffff;
            
        }

        label {
            display: block;
            margin-bottom: 8px;
        }

        select, button {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #f7f7f7;
        }

        button {
            background-color: #007bff;
            color: white;
            cursor: pointer;
        }

        button:hover {
            background-color: 667bca;
        }
	    #map {
            height: 400px;
        }
		
		.countdown-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.countdown-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}

.countdown {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 20px;
    margin: 10px;
    text-align: center;
    width: 200px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.countdown-label {
    font-size: 12px;
    color: #555;
    margin: 2px;
    font-weight: bold;
}

.countdown-value {
    font-size: 14px;
}

.countdown-value span {
    display: block;
    margin: 2px;
}

.countdown-value .days {
    color: #E74C3C; /* Rot */
}

.countdown-value .hours {
    color: #3498DB; /* Blau */
}

.countdown-value .minutes {
    color: #27AE60; /* Grün */
}

.countdown-value .seconds {
    color: #F39C12; /* Gelb */
}
.options {
    display: flex; /* Flexbox-Layout verwenden */
}

.options .option {
    margin-right: 10px; /* Abstand zwischen den Icons */
}

.options img {
    width: 50px;
}

#preview {
    margin-top: 20px;
    border: 1px solid #ccc;
    width: 100%;
    max-width: 800px;
    text-align: center;
    padding: 20px;
}

img {
    max-width: 100%;
    height: auto;
}
input[type="number"] {
    width: 200px;
    padding: 5px;
    font-size: 14px;
  }
  .info-box {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px 0;
  }
  .tool-box {
    border: 1px solid #717171;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;
    padding: 10px;
    margin: 10px 0;
    background-color: #f8f5f1;
    border-collapse: collapse;
            box-shadow: 2px 2px 2px rgba(226, 88, 29, 0.3);
  
  }
  .resultbox{
    border: 1px solid #e6a770;
    padding: 10px;
    margin: 10px 0;
    background-color: #faf6f3;
    border-collapse: collapse;
    box-shadow: 1px 1px 1px #bebcba;
  
  }
  .results{
    border: 1px solid #e6a770;
    padding: 10px;
    margin: 10px 0;
    background-color: #faf6f3;
    border-collapse: collapse;
    box-shadow: 1px 1px 1px #bebcba;
  
  }
  .textbox{
    border: 1px solid #dbb593;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;
    padding: 10px;
    margin: 10px 0;
    background-color: #fffcfa;
    border-collapse: collapse;
    box-shadow: 1px 1px 1px #ebeae8;
  
  }

  .info-table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 10px;
  }

  .info-table th,
  .info-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
  }

  .info-table th {
    background-color: #f2f2f2;
  }

  .info-list {
    margin-left: 20px;
  }


.menu::after{
    content: '';
    clear: both;
    display: block;
}

.menu a{
    display: block;
    padding: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
}

.menu li{
    position: relative;
}

.menu > li{
    float: left;
}

.menu, .menu ul{
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.menu ul li+li{
    border-top: 1px solid #fff;

}

.menu ul{
    position: absolute;
}

.menu > li ul, .menu ul ul{
    opacity: 0;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    z-index: -1;
    visibility: hidden;
    background-color: rgb(66, 66, 66);

}

.menu > li ul{
    top: 130%;
    left: 0;
}

.menu ul ul{
    left: 130%;
    top: 0;
}

.menu ul a{
    width: 250px;
}

.menu > li:hover > ul{
    top: 100%;
    opacity: 1;
    z-index: 1;
    visibility: visible;
}

.menu ul > li:hover > ul{
    left: 100%;
    opacity: 1;
    z-index: 1;
    visibility: visible;
}

/* color set */


.menu-gold, .menu-gold a{
    background-color: rgb(66, 66, 66);
    color: #e8e9ea;
}
.menu-gold a:hover{
    background-color: #eee3d6;
    color: #1d62b1;
}


.current-event {
    text-align: center;
    background-color: #f8f8f8; /* light gray */
    padding: 20px;
    margin-bottom: 20px;
}

.current-event h2 {
    color: #333; /* dark gray */
    font-size: 18px;
    margin-bottom: 10px;
}

.future-events {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* creates a 3-column grid */
    gap: 10px; /* spaces between grid items */
}

.future-event {
    background-color: #f8f8f8; /* light gray */
    padding: 20px;
}

.future-event h2 {
    color: #666; /* medium gray */
    font-size: 18x;
    margin-bottom: 1px;
}
button {
    padding: 10px 20px;
    margin: 5px;
    border: none;
    color: white;
    cursor: pointer;
}
#editBtn {
    background-color: rgb(89, 89, 212);
}
#resetBtn {
    background-color: rgb(203, 168, 93);
}
#startBtn {
    background-color: rgb(105, 174, 105);
}
.timer-img {
    height: 50px;
    margin: 1px;

}
#timer {

    margin: 0 auto;
    word-wrap: break-word;
    width: 97%; /* Sie können diesen Wert anpassen */
}
#quickTimers {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mini-timer {
    font-size: 10px; /* oder eine andere passende Größe */
    color: #696969; /* Farbe nach Wahl */
    margin-left: 10px;
}
.centered-numeric {
    display: block;
    text-align: center;
    margin: auto;  
    width: 100px;   
    font-size: 85px; /* oder eine andere passende Größe */
    color: #000000; /* Farbe nach Wahl */
    background-color: #ffffff;
    border-collapse: collapse;
    padding: 10px; 
    border: 1px solid rgb(102, 102, 102);
}

.stopwatch {
    border: 2px solid rgb(122, 118, 118);
    padding: 10px;
    text-align: center;
    background-color: white;
    width: 200px; 

}

#display {
    font-size: 2em;
    margin-bottom: 20px;
}

.controls {
    display: flex;
    flex-direction: row;
}

.btn {
    margin: 5px;
    padding: 10px;
    width: 90px; 
}

.green { background-color: #288e2b; }
.red { background-color: #c14e46; }
.blue { background-color: #28738d; }
.orange { background-color: #a76c13; }
.purple { background-color: #5e3066; }

#laps {
    margin-top: 20px;
}
.racing-watch {
    position: relative;
    width: 200px;
    height: 200px;
    border: 5px solid black;
    border-radius: 50%;
}

.main-dial, .sub-dial {
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
}

.main-dial {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

.sub-dial.minutes {
    width: 80px;
    height: 100px;
    top: 10px;
    left: 10px;
}

.sub-dial.milliseconds {
    width: 80px;
    height: 100px;
    top: 10px;
    right: 10px;
}

.hand {

    position: absolute;
    bottom: 50%;
    left: 50%;
    transform-origin: bottom;
    transform: rotate(0deg);
}

.second-hand {
    background-color: rgb(78, 78, 78);
    width: 2px;
    height: 50px;
}

.minute-hand {
    background-color: rgb(255, 12, 12);
    width: 2px;
    height: 8px;
}

.millisecond-hand {
    background-color: rgb(23, 171, 23);
    width: 2px;
    height: 8px;
}

.scene {
    perspective: 1200px;
  }
  
  .cube {
    position: relative;
    width: 100px;
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg);
  }
  
  .face {
    position: absolute;
    height: 100px;
    width: 100px;
    background: rgba(255,255,255,0.9);
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
  }
  
  .front  { transform: rotateY(0deg) translateZ(50px); }
  .back   { transform: rotateY(180deg) translateZ(50px); }
  .left   { transform: rotateY(-90deg) translateZ(50px); }
  .right  { transform: rotateY(90deg) translateZ(50px); }
  .top    { transform: rotateX(90deg) translateZ(50px); }
  .bottom { transform: rotateX(-90deg) translateZ(50px); }

  p, pre {
    margin-bottom: 20px;
}

pre {
    background-color: #f5f5f5;
    padding: 15px;
    border-radius: 5px;
    border: 1px dashed #000000;
    font-size: 14px;
    white-space: pre-wrap;
}


label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

input[type="number"] {
    width: 60;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    flex-direction: row;
}

p {
    margin-bottom: 20px;
}
hr {
    box-shadow: 2px 2px 4px #f7dbc4;

}

#wertD {
    font-weight: bold;
    color: #e74c3c;
    font-size: 1.5em;
}


input[type="radio"] + label {
    margin-right: 10px;
}
.dice {
    font-size: 60px;
    text-align: center;
}
#output {
    border: 1px solid #e6a770;
    padding: 10px;
    margin: 10px 0;
    background-color: #f1ebe7;
    border-collapse: collapse;
    box-shadow: 1px 1px 1px #bebcba;
}
.fieldRow {
    display: flex;
    size: 5;
    justify-content: space-between;
    margin-bottom: 10px;
}
#calendar {
    display: grid;
    grid-template-rows: repeat(2, 1fr); /* Zwei Zeilen */
    justify-content: space-between;
    width: 500px;
    font-size: 10px;
}
#calendar div div {
    width: 40%;
    box-sizing: border-box;
    padding: 5px;
}
.month {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* Sechs Monate nebeneinander in einer Zeile */
    gap: 20px; /* Abstand zwischen den Monaten */
}

#calendar table {
    width: 80%;
    border-collapse: collapse;
}

#calendar th, #calendar td {
    width: 12.28%; /* 100% / 7 Tage = 14.28% */
    text-align: center;
    padding: 2px;
    border: 1px solid #ccc;
}

.vollmond {
    background-color: #6e6363;
    font-size: 16px;
}

.naechsterVollmond {
    background-color: #ffcccb;
}
.modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    cursor: pointer;
    border-radius: 4px; /* Runde Ecken für den Modal */
}

.modal img {
    max-width: 90%;
    max-height: 90%;
    display: block;
    margin: auto;
}

.modal-content {
    position: relative;
    background-color: #FFF;
    padding: 20px;
    border-radius: 4px; /* Runde Ecken für den inneren Modal-Inhalt */
}
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.grid-container img {
    height: 200px; /* oder jede gewünschte Höhe */
    width: 100%;
    object-fit: cover;
}

.selected-image {
    width: 100%;
    height: auto;
    border: 1px solid #a5a5a5;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;
    box-sizing: border-box;
}

.selected-image:hover {
    border-color: #e5ab0e; /* Farbe, die beim Überfahren mit der Maus angezeigt wird */
}
.download-button {
    display: block;
    margin-top: 8px;
    padding: 8px 16px;
    background-color: #e9eff3;
    border: 1px solid #a5a5a5;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;
    box-sizing: border-box;
    color: #3684b1;
    text-align: center;
  
}
.download-button:hover {
    background-color: #fcf9f7;
}
ul.ohne-punkte {
    list-style-type: none;
    padding-left: 10px;
    margin-bottom: 0; 
}

ul.ohne-punkte li {
    margin-top: 0;
    margin-bottom: 10px;
}

ul.ohne-punkte li:last-of-type {
    margin-bottom: 0;
}
.marked-p {
    border-left: 2px solid rgb(228, 228, 228);
    padding-left: 10px;
}
.grid1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
}
.grid1-1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 15px;
    list-style-type: none;
}
.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 30px;
    align-items: center;
    margin-right: 0px;
}
.grid2-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
    list-style-type: none;
}
.emoji-box {
    display: inline-block;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 5px;
    width: auto;
    text-align: center;
    vertical-align: top;
}

.konto-loeschen {
    display: inline-block;
    grid-template-columns: 1fr 1fr 1fr;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 5px;
    width: 28%;
    text-align: left;
    vertical-align: top;
}
.konto-loeschen img {
    vertical-align: middle;
}

/* Stil für das 3er Grid */
.grid3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.grid5 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.title-container {
    display: flex;
    align-items: center;
}

.title-container img {
    width: 24px; /* Passe die Breite des Bildes nach Bedarf an */
    margin-right: 10px;
}

.title-container h2 {
    margin: 0;
    padding: 10px;
    display: flex;
    align-items: center;
    font-size: 1.1em; /* Passe die Schriftgröße nach Bedarf an */
}
.title-container h5 {
    margin: 0;
    padding: 10px;
    display: flex;
    align-items: center;
    font-size: 1.1em; /* Passe die Schriftgröße nach Bedarf an */
}
li.spezial {
  
        list-style-image: url('../images/main/square-blue-icon.png');
  }

@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr); /* Oder andere Anpassungen */
    }
    .grid2 {
        grid-template-columns: 1fr; /* Oder andere Anpassungen */
    }
    .grid3 {
        grid-template-columns: 1fr; /* Oder andere Anpassungen */
    }
    .grid8 {
        display: flex;
        grid-template-columns: 1fr; /* Oder andere Anpassungen */
    }
    .future-events {
        display: grid;
        grid-template-columns: 1fr 1fr; /* creates a 3-column grid */
        gap: 10px; /* spaces between grid items */
    }
    
}
/* mini reset */
.nav,
.nav a,
.nav form,
.nav input,
.nav li,
.nav ul {
  border: none;
  margin: 3;
  padding: 0;
}
.nav a {
  text-decoration: none;
}
.nav li {
    list-style-image: url('../images/main/square-blue-icon.png');
}

/* menu container */
.nav,
input {
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
.nav {
  cursor: default;
  display: inline-block;
  position: relative;
  z-index: 500;
}

/* menu list */
.nav > li {
  float: left;
}

/* menu links */
.nav > li > a {
  background: #372f2b;
  border-left: 1px solid #4b4441;
  border-right: 1px solid #312a27;
  color: #ececec;
  display: block;
  font-weight: bold;
  line-height: 3.5;
  padding: 0 1.25em;
  position: relative;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.35);
  transition: all .3s ease;
  z-index: 510;
}
.nav > li > a:focus,
.nav > li:hover > a {
  background: #4b4441;
}
.nav > li:first-child > a {
  border-left: none;
  border-radius: 3px 0 0 3px;
}

/* search form */
.nav-search > form {
  border-left: 1px solid #4b4441;
  height: 3.5em;
  position: relative;
  width: inherit;
  z-index: 10;
}
.nav-search input[type="text"] {
  background: #372f2b;
  color: #999;
  display: block;
  float: left;
  font-weight: bold;
  line-height: 1.5;
  padding: 1em 0;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.35);
  transition: all .3s ease 1s;
  width: 0;
}
.nav-search input[type="text"]:focus {
  color: #424242;
}
.nav-search input[type="text"]:focus,
.nav-search:hover input[type="text"] {
  padding: 1em 1.25em;
  transition: all .3s ease .1s;
  width: 6.875em;
}
.nav-search input[type="submit"] {
  background: #372f2b url(../img/search-icon.png) no-repeat center center; /* IE8 fallback */
  background: #372f2b url(../img/search-icon.svg) no-repeat center center;
  border-radius: 0 3px 3px 0;
  cursor: pointer;
  display: block;
  float: left;
  height: 3.5em;
  padding: 0 1.25em;
  transition: all .3s ease;
}
.nav-search input:focus,
.nav-search input[type="submit"]:hover {
  background-color: #4b4441;
}

/* menu dropdown */
.mega-menu {
    background: #faf9f9;
    border: 1px solid #ddd;
    border-radius: 0 0 3px 3px;
    opacity: 0;
    position: absolute;
    transition: all .3s ease .15s;
    visibility: hidden;
    width: 900px;
    left: 0;  /* Links ausrichten */
    /* right: 0; Entfernen oder auskommentieren */
    display: flex;
    flex-wrap: wrap;
  }
li:hover > .mega-menu {
  opacity: 1;
  overflow: visible;
  visibility: visible;
}

/* menu content */
.nav-column {
  float: left;
  padding: 2.5%;
  width: 20%;
}
.nav-column a {
  color: #1c7dce;
  display: block;
  font-weight: bold;
  line-height: 1.75;
  font-size: 12px;
}
.nav-column a:hover {
    text-decoration: underline;
}

.highlight {
  color: #255a85;
}

/* Allgemeiner Desktop-Stil (bereits vorhanden) */

/* Mobile Anpassungen */

/* Bild und Unicode Stile */
.emoji-image {
    font-size: 96px;
    cursor: pointer;
    text-align: center;
    line-height: normal;
    vertical-align: middle;
}

.unicode {
    font-size: 24px;
    cursor: pointer;
    text-align: center;
    line-height: normal;
    vertical-align: middle;
}

/* Überschriften und Text */
.emoji-name {
    font-size: 36px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 20px;
}

.emoji-category {
    background-color: #d1d5db;
    padding: 10px;
    margin: 10px 0;
}

/* Infoboxen und Tabellen */
.infobox {
    background-color: #fff;
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
}

.table-div {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
}

.table-div > div {
    padding: 10px;
    border: 1px solid #ccc;
}

/* Ähnliche Unicodes */
.similar-unicodes {
    display: flex;
    gap: 15px;
}

.similar-unicode {
    font-size: 48px;
    cursor: pointer;
}
.emoji-header h1 {
    font-size: 2em;
}

.copy-icons {
    display: flex;
    gap: 10px;
}

.emoji,
.unicode {
    font-size: 3em;
}
.gridemoji {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* Erstellt 3 gleich große Spalten */
    align-items: center;  /* Für vertikale Ausrichtung */
  gap: 0.3rem;
    padding: 0.3rem;
    border: 1px dashed #2c2c2c;
    border-radius: 5px;
    color: #be770c;

}
.grid2emoji {

  gap: 0.3rem;
    padding: 0.3rem;
    border: 1px dashed #2c2c2c;
    border-radius: 5px;

}
.grid1emoji {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.3rem;
    padding: 0.5rem;
    border-radius: 5px;
    align-items: center; 

}

.marked-emoji {
    padding: 0.5rem;
    border: 1px solid #b17824;
    border-radius: 3px;
    background-color: #ffffff;

    font-size: 14px;
}
.gridemoji2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0.5rem;
    border: 1px solid #b17824;
    border-radius: 3px;
    background-color: #ffffff;

    font-size: 14px;

}
@media (max-width: 767px) {
    /* Stil für mobile Geräte */
    .nav > li {
      float: none;
      display: block;
    }
    .nav > li > a {
      text-align: center;
      padding: 0.5em;
      font-size: 12px; /* Verkleinert die Schriftgröße */
      padding: 0.25em 0.5em; /* Verkleinert die Polsterung der Box */
    }
    .nav {
      display: block;
    }
    .mega-menu {
      width: 100%;  /* Breite auf 100% setzen */
      left: 0;
      position: relative;  /* oder lassen Sie es als "absolute", je nach Bedarf */
      height: 0;  /* Höhe auf 0 setzen */
      overflow: hidden;  /* Inhalt ausblenden */
      transition: height .3s ease;  /* Übergang für Höhe */
    }
    
    .nav-column {
      width: 100%;  /* Breite der Spalte auf 100% setzen */
      padding: 1em;
      box-sizing: border-box;
    }
    .nav-search input[type="text"],
    .nav-search input[type="submit"] {
      width: 100%;
      float: none;
    }
    li:hover > .mega-menu,
    .mega-menu.active {  /* .active ist ein Beispiel für eine Klasse, die per JavaScript hinzugefügt werden könnte */
      height: auto;  /* Höhe automatisch setzen, wenn das Menü sichtbar ist */
      overflow: visible;  /* Inhalt sichtbar machen */
    }

        .gridemoji {
            grid-template-columns: 1fr 1fr;
        }
        .grid1emoji {
            grid-template-columns: 1fr;
        }
  
}
.progress-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.progress-label {
    width: 80px;
    text-align: right;
    margin-right: 5px;
    padding: 5px;
}

.progress-bar {
    width: 150px;
    height: 20px;
    background-color: #ccc;
    border-radius: 10px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background-color: green;
    border-radius: 10px 0 0 10px;
}
button#copyEmoji {
    background-color: #f5f5f5;
    border: 1px solid #858585;
    color: rgb(8, 71, 207);
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
}

button#copyEmoji:hover {
    background-color: #e9e9e9;
    border: 1px solid #858585;
    color: rgb(8, 71, 207);
    }
    
    /* Klick Effekt */
    button#copyEmoji:active {
        background-color: rgb(8, 71, 207);
        border: 1px solid #858585;
        color: #ececec;
    }      
    button#copyUnicode {
        background-color: #f5f5f5;
        border: 1px solid #858585;
        color: rgb(8, 71, 207);
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
    }
    
    button#copyUnicode:hover {
        background-color: #e9e9e9;
        border: 1px solid #858585;
        color: rgb(8, 71, 207);
        }
        
        /* Klick Effekt */
        button#copyUnicode:active {
            background-color: rgb(8, 71, 207);
            border: 1px solid #858585;
            color: #ececec;
        }      
        .folder {
            display: inline-block;
            margin: 20px;
            border: 1px solid #ddd;
            border-radius: 10px;
            overflow: hidden;
            transition: transform 0.3s ease;
        }

        .folder:hover {
            transform: scale(1.05);
        }

        .folder img {
            display: block;
            width: 175px;
            height: 175px;
        }
        .folder2 {
            display: grid;
    grid-template-columns: repeat(6, 1fr); 
            margin: 1px;
            padding: 5px;

        }
        .folder2 img {
            display: block;
            border: 1px solid #dfdfdf;
            border-radius: 10px;
            overflow: hidden;
            transition: transform 0.3s ease;
        }

        .grid8 {
    display: grid;
    grid-template-columns: auto 3fr; 
    gap: 10px;
    margin-top: 30px;
    align-items: center;
    margin-right: 0px;
}
.color-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 10px;
    margin: 10px;
    padding: 15px;
    border: 1px solid #ccc;
            border-radius: 10px;
            overflow: hidden;
            transition: transform 0.3s ease;
}

.color-category {
    display: flex;
    flex-direction: column; /* Änderung hier: Elemente in einer Spalte anordnen */
    
}

.color-item-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; 
    align-items: center;
    margin-top: 15px;
    background: #fdfdfd;
    
}

.color-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;

}

.color-box {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #222;
    margin-right: 5px;
}
