nav {
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 20px 0;
           margin-bottom: 40px;
           border-bottom: 1px solid #eaeaea;
       }

       .logo {
           font-size: 1.8rem;
           font-weight: 300;
           color: #2c3e50;
           text-decoration: none;
       }

       .logo span {
           color: #3498db;
           font-weight: 400;
       }

       .nav-links {
           display: flex;
           gap: 30px;
       }

       .nav-links a {
           color: #34495e;
           text-decoration: none;
           font-size: 1rem;
           padding: 8px 16px;
           border-radius: 6px;
           transition: all 0.2s ease;
       }

       .nav-links a:hover {
           background: #ecf0f1;
           color: #2980b9;
       }

       .nav-links a.active {
           background: #3498db;
           color: white;
       }

       .nav-links a.active:hover {
           background: #2980b9;
       }

       * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }

       body {
           font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
           line-height: 1.6;
           color: #333;
           background-color: #f8f9fa;
           max-width: 800px;
           margin: 0 auto;
           padding: 20px;
       }

       h1 {
           font-size: 2rem;
           font-weight: 300;
           margin-bottom: 10px;
           color: #2c3e50;
           text-align: center;
       }

       .fach-dialog {
           display: none;
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background-color: rgba(0, 0, 0, 0.5);
           z-index: 1000;
           align-items: center;
           justify-content: center;
       }

       .dialog-inhalt {
           background: white;
           padding: 25px;
           border-radius: 10px;
           width: 90%;
           max-width: 400px;
           box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
       }

       .dialog-inhalt h3 {
           margin-bottom: 20px;
           color: #2c3e50;
           font-weight: 400;
       }

       .eingabe-gruppe {
           margin-bottom: 20px;
       }

       .eingabe-gruppe label {
           display: block;
           margin-bottom: 8px;
           color: #34495e;
           font-size: 0.95rem;
       }

       input[type="text"] {
           width: 100%;
           padding: 10px 12px;
           border: 1px solid #ddd;
           border-radius: 6px;
           font-size: 1rem;
           color: #333;
           background-color: #fff;
           transition: border-color 0.2s ease;
       }

       input[type="text"]:focus {
           outline: none;
           border-color: #3498db;
       }

       .dialog-knoepfe {
           display: flex;
           justify-content: flex-end;
           gap: 12px;
           margin-top: 25px;
           padding-top: 20px;
           border-top: 1px solid #eee;
       }

       #fachContainer {
           display: flex;
           flex-direction: column;
           gap: 25px;
           margin-top: 30px;
       }

       .fach-karte {
           background: white;
           border-radius: 8px;
           padding: 20px;
           box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
           transition: transform 0.2s ease, box-shadow 0.2s ease;
       }

       .fach-karte:hover {
           transform: translateY(-2px);
           box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
       }

       h2 {
           font-size: 1.4rem;
           font-weight: 400;
           margin-bottom: 15px;
           color: #34495e;
           padding-bottom: 8px;
           border-bottom: 1px solid #eaeaea;
       }

       h3 {
           font-size: 1.1rem;
           font-weight: 400;
           margin: 15px 0 10px 0;
           color: #2c3e50;
       }




       ul {
           list-style-type: none;
           margin-bottom: 20px;
       }

       li {
           padding: 12px 15px;
           margin-bottom: 8px;
           background: #f8f9fa;
           border-radius: 4px;
           border-left: 4px solid #3498db;
           transition: all 0.2s ease;
       }

       li:hover {
           background: #ecf0f1;
           transform: translateX(2px);
       }

       .mini {
           font-size: 2px;
           color: #ddd9d9;
           margin-top: 1px;
       }

       button {
           padding: 10px 20px;
           background: #3498db;
           color: white;
           border: none;
           border-radius: 6px;
           font-size: 0.95rem;
           cursor: pointer;
           transition: all 0.2s ease;
       }

       button:hover {
           background: #2980b9;
           transform: translateY(-1px);
           box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
       }

       button:active {
           transform: translateY(0);
       }


       #fachHinzufuegenBtn {
           display: block;
           width: 100%;
           padding: 12px;
           margin: 20px 0;
           background: #3498db;
       }

       #fachHinzufuegenBtn:hover {
           background: #2980b9;
       }

       #abbrechenKnopf {
           background: #f8f9fa;
           color: #7f8c8d;
           border: 1px solid #ddd;
       }

       #abbrechenKnopf:hover {
           background: #e9ecef;
       }

       .material-hinzufuegen {
           margin-top: 20px;
           padding-top: 20px;
           border-top: 1px solid #eee;
       }

       @media (max-width: 600px) {
           body {
               padding: 15px;
           }

           h1 {
               font-size: 1.6rem;
           }

           h2 {
               font-size: 1.2rem;
           }

           .fach-karte {
               padding: 15px;
           }

           .dialog-inhalt {
               padding: 20px;
           }
       }