/* @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600&display=swap'); */


/* Rubik Light (300) */
@font-face {
    font-family: 'Rubik';
    font-weight: 300;
    src: url('../webfonts/Rubik-300.woff2') format('woff2'),
         url('../webfonts/Rubik-300.woff') format('woff');
}

/* Rubik Regular (400) */
@font-face {
    font-family: 'Rubik';
    font-weight: 400;
    src: url('../webfonts/Rubik-400.woff2') format('woff2'),
         url('../webfonts/Rubik-400.woff') format('woff');
}

/* Rubik Medium (500) */
@font-face {
    font-family: 'Rubik';
    font-weight: 500;
    src: url('../webfonts/Rubik-500.woff2') format('woff2'),
         url('../webfonts/Rubik-500.woff') format('woff');
}

/* Rubik SemiBold (600) */
@font-face {
    font-family: 'Rubik';
    font-weight: 600;
    src: url('../webfonts/Rubik-600.woff2') format('woff2'),
         url('../webfonts/Rubik-600.woff') format('woff');
}


:root{
   --main-color:#1e5727;
   --red:#e74c3c;
   --orange:#f39c12;
   --black:#34495e;
   --white:#fff;
   --light-bg:#f5f5f5;
   --light-color:#999;
   --border:.1rem solid var(--black);
   --box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
}

*{
   font-family: 'Rubik', sans-serif;
   margin:0; padding:0;
   box-sizing: border-box;
   outline: none; border:none;
   text-decoration: none;
}

*::selection{
   background-color: var(--main-color);
   color:var(--white);
}

::-webkit-scrollbar{
   height: .5rem;
   width: 1rem;
}

::-webkit-scrollbar-track{
   background-color: none;
}

::-webkit-scrollbar-thumb{
   background-color: var(--main-color);
}

html{
   font-size: 62.5%;
   overflow-x: hidden;
   scroll-behavior: smooth;
   scroll-padding-top: 7rem;
}

body{
   background-color: var(--light-bg);
   padding-bottom: 7rem;
}

section{
   padding:2rem;
   margin: 0 auto;
   /* max-width: 800px; */
   max-width: 1200px;
}

.btn,
.delete-btn,
.option-btn,
.inline-btn,
.inline-option-btn,
.inline-delete-btn{
   margin-top: 1rem;
   border-radius: .5rem;
   cursor: pointer;
   font-size: 1.8rem;
   color:var(--white);
   padding:1.2rem 3rem;
   text-transform: capitalize;
   text-align: center;
}

.inline-btn,
.inline-option-btn,
.inline-delete-btn{
   display: inline-block;
   margin-right: 1rem;
}

.btn,
.delete-btn,
.option-btn{
   display: block;
   width: 100%;
}

.inline-btn,
.btn{
   background-color: var(--main-color);
}

.inline-delete-btn,
.delete-btn{
   background-color: var(--red);
}

.inline-option-btn,
.option-btn{
   background-color: var(--orange);
}

.btn:hover,
.delete-btn:hover,
.option-btn:hover,
.inline-btn:hover,
.inline-delete-btn:hover,
.inline-option-btn:hover{
   background-color: var(--black);
}

.flex-btn{
   display: flex;
   gap:1rem;
}

#user-btn {
   display: none;
}

.message{
   position: sticky;
   top:0;
   max-width: 1200px;
   margin:0 auto;
   background-color: var(--light-bg);
   padding:2rem;
   display: flex;
   align-items: center;
   gap:1rem;
   justify-content: space-between;
}

.message span{
   font-size: 2rem;
   color:var(--black);
}

.message i{
   font-size: 2.5rem;
   color:var(--red);
   cursor: pointer;
}

.message i:hover{
   color:var(--black);
}

.empty{
   border:var(--border);
   border-radius: .5rem;
   background-color: var(--white);
   padding:1.5rem;
   text-align: center;
   width: 100%;
   font-size: 2rem;
   color:var(--red);
   box-shadow: var(--box-shadow);
}

.heading{
   margin-bottom: 2rem;
   text-align: center;
   font-size: 4rem;
   color:var(--black);
   text-transform: capitalize;
}

.header{
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-bottom: var(--border);
   position: sticky;
   top:0; left:0; right: 0;
   z-index: 1000;
}

.header .flex{
   display: flex;
   align-items: center;
   gap:1.5rem;
   justify-content: space-between;
   position: relative;
   padding:1.5rem 2rem;
}

.header .flex .logo{
   font-size: 2.5rem;
   color:var(--black);
}

.header .flex .search-form{
   border:var(--border);
   border-radius: .5rem;
   background-color: var(--light-bg);
   display: flex;
   gap:2rem;
   padding:1.5rem 2rem;
   width: 50rem;
}

.header .flex .search-form .box{
   width: 100%;
   background: none;
   font-size: 1.7rem;
   color:var(--black);
}

.header .flex .search-form .fa-search{
   font-size: 2rem;
   cursor: pointer;
   color:var(--black);
   background: none;
}

.header .flex .icons div{
   font-size: 2rem;
   color:var(--black);
   cursor: pointer;
   margin-left: .5rem;
   height: 4.5rem;
   width: 4.7rem;
   line-height: 4rem;
   border:var(--border);
   background-color: var(--light-bg);
   border-radius: .5rem;
   border-radius: .5rem;
   text-align: center;
}

.header .flex .icons div:hover{
   background-color: var(--black);
   color:var(--white);
}

.header .flex .navbar{
   position: absolute;
   top:125%; right:2rem;
   border: var(--border);
   background-color: var(--white);
   border-radius: .5rem;
   width:30rem;
   box-shadow: var(--border);
   display: none;
   animation: .2s linear fadeIn;
}

.header .flex .navbar.active{
   display: inline-block;
}

@keyframes fadeIn {
   0%{
      transform: translateY(1rem);
   }
}

.header .flex .navbar a{
   display: block;
   margin:2rem;
   font-size: 2rem;
   color:var(--black);
}

.header .flex .navbar a i{
   margin-right: 1rem;
   color:var(--main-color);
   transition: .2s linear;
}

.header .flex .navbar a:hover i{
   margin-right: 2rem;
}

.header .flex .profile{
   position: absolute;
   top:125%; right:2rem;
   border: var(--border);
   background-color: var(--white);
   border-radius: .5rem;
   width:30rem;
   box-shadow: var(--border);
   display: none;
   padding: 1.5rem;
   animation: .2s linear fadeIn;
   text-align: center;
   overflow: hidden;
}

.header .flex .profile p{
   padding-bottom: .7rem;
   font-size: 2rem;
   color:var(--light-color);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.header .flex .profile.active{
   display: inline-block;
}

#search-btn{
   display: none;
}

.form-container{
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: calc(100vh - 16rem);
}

.form-container form{
   background-color: var(--white);
   border-radius: .5rem;
   border:var(--border);
   box-shadow: var(--box-shadow);
   padding:2rem;
   text-align: center;
   width: 50rem;
}

.form-container form h3{
   font-size: 2.5rem;
   color:var(--black);
   text-transform: uppercase;
   margin-bottom: 1rem;
}

.form-container form p{
   padding-top: 1.5rem;
   font-size: 2rem;
   color:var(--light-color);
}

.form-container form p a{
   color:var(--orange);
}

.form-container form p a:hover{
   text-decoration: underline;
   color:var(--black);
}

.form-container form .box{
   width: 100%;
   background-color: var(--light-bg);
   padding:1.4rem;
   font-size: 1.4rem;
   color:var(--black);
   margin:1rem 0;
   border:var(--border);
   font-size: 1.8rem;
   border-radius: .5rem;
}

.home-grid .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(33rem, 1fr));
   gap:1.5rem;
   align-items: flex-start;
}

.home-grid .box-container .box{
   border:var(--border);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
   background-color: var(--white);
   padding:2rem;
   overflow: hidden;
}

.home-grid .box-container .box p{
   padding-bottom: 1rem;
   font-size: 2rem;
   color:var(--light-color);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.home-grid .box-container .box p span{
   color:var(--main-color);
}

.home-grid .box-container .box .flex-box{
   display: flex;
   flex-wrap: wrap;
   gap:1rem;
   padding-top: 1rem;
}

.home-grid .box-container .box .flex-box .links{
   padding:1rem 3rem;
   border-radius: .5rem;
   background-color: var(--light-bg);
   font-size: 2rem;
   color:var(--black);
   border:var(--border);
}

.home-grid .box-container .box .flex-box .links:hover{
   background-color: var(--black);
   color:var(--white);
}


.posts-container .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(33rem, 1fr));
   gap:1.5rem;
   align-items: flex-start;
   justify-content: center;
}

.posts-container .box-container .box{
   border:var(--border);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
   background-color: var(--white);
   padding:2rem;
   overflow: hidden;
}

.posts-container .box-container .box .post-admin{
   display: flex;
   align-items: center;
   gap:1.5rem;
   margin-bottom: 2rem;
}

.posts-container .box-container .box .post-admin i{
   text-align: center;
   height: 4.5rem;
   width: 5rem;
   line-height: 4.2rem;
   font-size: 2rem;
   border:var(--border);
   border-radius: .5rem;
   background-color: var(--light-bg);
   color:var(--black);
}

.posts-container .box-container .box .post-admin a{
   font-size: 2rem;
   color:var(--main-color);
   text-transform: capitalize;
}

.posts-container .box-container .box .post-admin a:hover{
   color:var(--black);
}



.post-admin {
   display: flex;
   flex-direction: row;
   align-items: center; /* Zentriert die Elemente vertikal ausrichten */
}

.post-admin .datum {
   margin-left: auto; /* Verschiebt das Datum ganz nach rechts */
}

.posts-container .box-container .box .post-admin div{
   font-size: 1.5rem;
   margin-top: 1.2rem;
   color:var(--light-color);
}

.posts-container .box-container .box .post-image{
   width: 100%;
   border-radius: .5rem;
   margin-bottom: 2rem;
   margin-top: 2rem;
}

.posts-container .box-container .box .post-title{
   font-size: 2rem;
   color:var(--main-color);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   margin-bottom: 1rem;
}

.posts-container .box-container .box .post-content{
   font-size: 2rem;
   line-height: 1.5;
   padding:.5rem 0;
   color:var(--black);
   /* white-space: pre-line; */
}

.posts-container .box-container .box .post-content::after{
   content: '...';
}

.posts-container .box-container .box .post-cat{
   display: block;
   /* margin-top: 2rem; */
   font-size: 1.7rem;
}

.posts-container .box-container .box .post-cat i{
   margin-right: .5rem;
   color:var(--main-color);
}

.posts-container .box-container .box .post-cat{
   color:var(--main-color);
}

.posts-container .box-container .box .post-cat:hover{
   color:var(--black);
}

.posts-container .box-container .box .icons{
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap:1rem;
   background-color: var(--light-bg);
   border-radius: .5rem;
   padding:1.5rem 2rem;
   border:var(--border);
   margin-top: 2rem;
}

.posts-container .box-container .box .icons button{
   cursor: pointer;
}

.posts-container .box-container .box .icons i{
   margin-right:.5rem;
   font-size:2rem;
   color:var(--light-color);
}

.posts-container .box-container .box .icons span{
   font-size: 2rem;
   color:var(--main-color);
}

.posts-container .box-container .box .icons *:hover{
   color:var(--black);
}

.comments-container .comment-title{
   background-color: var(--black);
   color:var(--white);
   padding:1.5rem;
   font-size: 2rem;
   border-radius: .5rem;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
}

.comments-container .add-comment{
   border:var(--border);
   margin-bottom: 2rem;
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
   padding:2rem;
   background-color: var(--white);
   border-top-left-radius: 0;
   border-top-right-radius: 0;
}

.comments-container .add-comment p{
   font-size: 2rem;
   color:var(--light-color);
   margin-bottom: 1rem;
}

.comments-container .add-comment p i{
   margin-right:1rem;
}

.comments-container .add-comment p a{
   color:var(--main-color);
}

.comments-container .add-comment p a:hover{
   text-decoration: underline;
   color:var(--black);
}

.comments-container .add-comment textarea{
   width: 100%;
   border-radius: .5rem;
   background-color: var(--light-bg);
   padding:1.5rem 2rem;
   margin:1rem 0;
   border: var(--border);
   font-size: 2rem;
   color:var(--black);
   height: 15rem;
   resize:none;
}

.comments-container .user-comments-container{
   display: grid;
   gap:2.5rem;
   border:var(--border);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
   padding:2rem;
   background-color: var(--white);
   border-top-left-radius: 0;
   border-top-right-radius: 0;
}

.comments-container .user-comments-container .show-comments .post-title{
   margin-bottom: 1rem;
   font-size: 2rem;
   color:var(--light-color);
}

.comments-container .user-comments-container .show-comments .post-title span{
   color:var(--black);
   line-height: 1.5;
}

.comments-container .user-comments-container .show-comments .post-title a{
   color:var(--main-color);
}

.comments-container .user-comments-container .show-comments .post-title a:hover{
   text-decoration: underline;
}

.comments-container .user-comments-container .show-comments .comment-user{
   display: flex;
   align-items: center;
   gap:1rem;
   margin-bottom: 1.5rem;
}

.comments-container .user-comments-container .show-comments .comment-user i{
   text-align: center;
   height: 5rem;
   width: 5rem;
   line-height: 4.7rem;
   font-size: 2rem;
   border:var(--border);
   border-radius: .5rem;
   background-color: var(--light-bg);
   color:var(--black);
}

.comments-container .user-comments-container .show-comments .comment-user span{
   font-size: 2rem;
   color:var(--main-color);
}

.comments-container .user-comments-container .show-comments .comment-user div{
   font-size: 1.5rem;
   margin-top: .2rem;
   color:var(--light-color);
}

.comments-container .user-comments-container .show-comments .comment-text{
   line-height: 1.5;
   font-size: 1.7rem;
   color:var(--light-color);
}

.comments-container .user-comments-container .show-comments .comment-box{
   border-radius: .5rem;
   background-color: var(--light-bg);
   padding:1.5rem 2rem;
   font-size: 2rem;
   color:var(--black);
   width: 100%;
   white-space: pre-line;
   line-height: 1.5;
   border: var(--border);
}

.comments-container .user-comments-container .show-comments textarea{
   resize: none;
   border:var(--border);
}

.comment-edit-form{
   padding-bottom: 0;
}

.comment-edit-form p{
   background-color: var(--black);
   color:var(--white);
   padding:1.5rem;
   font-size: 2rem;
   border-radius: .5rem;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
}

.comment-edit-form form{
   border-bottom-left-radius: .5rem;
   border-bottom-right-radius: .5rem;
   border:var(--border);
   padding:2rem;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
}

.comment-edit-form form textarea{
   font-size: 2rem;
   color:var(--black);
   line-height: 1.5;
   height: 15rem;
   width: 100%;
   resize: none;
   background-color: var(--light-bg);
   border:var(--border);
   border-radius: .5rem;
   padding:1.5rem;
   margin-bottom: .5rem;
}

.authors .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(33rem, 1fr));
   gap:1.5rem;
   align-items: flex-start;
   justify-content: center;
}

.authors .box-container .box{
   border:var(--border);
   border-radius: .5rem;
   background-color: var(--light-bg);
   padding:2rem;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
}

.authors .box-container .box p{
   padding-bottom: 1rem;
   font-size: 2rem;
   color:var(--light-color);
}

.authors .box-container .box p span{
   color:var(--main-color);
   text-transform: capitalize;
}

.categories .box-container{
   border:var(--border);
   border-radius: .5rem;
   background-color: var(--light-bg);
   padding:1rem 2rem;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
}

.categories .box-container .box{
   padding:1rem 0;
   font-size: 2rem;
}

.categories .box-container .box span{
   color:var(--light-color);
   display: inline-block;
   padding:.7rem 1rem;
   border:var(--border);
   background-color: var(--light-bg);
   border-radius: .5rem;
   text-align: center;
}

.categories .box-container .box a{
   margin-left: 1.2rem;
   color:var(--black);
}

.categories .box-container .box a:hover{
   color:var(--main-color);
   text-decoration: underline;
}












.footer{
   background-color: var(--white);
   position: fixed;
   bottom: 0; left:0; right:0;
   border-top: var(--border);
   text-align: center;
   font-size: 2rem;
   color:var(--light-color);
   padding:2rem;
}

.footer span{
   color:var(--main-color);
}

/* body{
   padding-bottom: 15rem;
}

.footer{
   padding-bottom: 10rem;
} */



@media (max-width:991px){

   html{
      font-size: 55%;
   }

}

@media (max-width:768px){

   body{
      padding-bottom: 10rem;
   }

   #search-btn{
      display: inline-block;
   }

   .header .flex .search-form{
      position: absolute;
      top:99%; left:0; right: 0;
      border-left: none;
      border-right: none;
      border-radius: 0;
      width: 100%;
      background-color: var(--white);
      box-shadow: var(--box-shadow);
      padding:2rem;
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
      transition: .2s linear;
   }

   .header .flex .search-form.active{
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
   }

}

@media (max-width:450px){

   html{
      font-size: 50%;
   }

   .heading{
      font-size: 3rem;
   }  

}
/* ==========================================================================
   codeMich.de - neuer Stil (20.09.2026)
   Palette von schmiede.codemich.de (Mint #80d0c7, Eisblau #f0f8ff), eigenstaendig
   gegenueber micha-it.de (Indigo, Symbol-Karten). Nur CSS, keine PHP-Aenderung.
   Rueckweg: alles ab diesem Kommentar entfernen.
   ========================================================================== */
:root{
   --main-color:#17786c;        /* dunkles Tuerkis: Links, Buttons (Kontrast auf Weiss 5,4:1) */
   --accent:#80d0c7;            /* Mint aus schmiede */
   --accent-soft:#e3f5f2;
   --black:#1f3341;             /* Tinte statt Blaugrau */
   --light-bg:#f0f8ff;
   --light-color:#6b7d8a;
   --border:.1rem solid #d3e4ec;
   --box-shadow:0 .6rem 2.4rem rgba(31,51,65,.08);
   --radius:1.4rem;             /* fuer die von micha-it uebernommenen Projekt-Seiten */
   --breite:1200px;
}

body{ background-color:var(--light-bg); color:var(--black); }
*::selection{ background-color:var(--accent); color:var(--black); }
::-webkit-scrollbar-thumb{ background-color:var(--accent); border-radius:1rem; }

/* Kopfzeile: weiss mit Mint-Balken, Logo mit </> */
.header{ border-bottom:.1rem solid #d3e4ec; border-top:.4rem solid var(--accent); box-shadow:0 .2rem 1.6rem rgba(31,51,65,.06); }
.header .flex .logo{ font-weight:600; letter-spacing:-.02rem; }
.header .flex .logo::before{ content:"</>"; color:var(--main-color); font-weight:400; margin-right:.8rem; font-size:2.1rem; }
.header .flex .search-form{ border-radius:10rem; padding:1.2rem 2.4rem; background:#fff; }
.header .flex .search-form:focus-within{ border-color:var(--accent); box-shadow:0 0 0 .3rem var(--accent-soft); }
.header .flex .icons div{ border-radius:1rem; background:#fff; }
.header .flex .icons div:hover{ background-color:var(--main-color); color:#fff; border-color:var(--main-color); }
.header .flex .navbar{ border-radius:1.2rem; box-shadow:var(--box-shadow); overflow:hidden; }
.header .flex .navbar a:hover{ color:var(--main-color); }

/* Ueberschriften */
.heading{ text-transform:none; font-weight:600; color:var(--black); }
.heading::after{ content:""; display:block; width:6rem; height:.4rem; margin:1rem auto 0; border-radius:1rem; background:var(--accent); }

/* Karten */
.posts-container .box-container{ gap:2.2rem; align-items:stretch; }
.posts-container .box-container .box{
   border:none; border-radius:1.6rem; padding:1.8rem; display:flex; flex-direction:column;
   box-shadow:var(--box-shadow); transition:transform .18s ease, box-shadow .18s ease;
}
.posts-container .box-container .box:hover{ transform:translateY(-.4rem); box-shadow:0 1rem 3rem rgba(31,51,65,.14); }
.posts-container .box-container .box .post-admin{ margin-bottom:1.2rem; justify-content:space-between; }
.posts-container .box-container .box .post-admin > div:first-child{ margin-top:0; }
.posts-container .box-container .box .post-cat{
   display:inline-block; background:var(--accent-soft); color:var(--main-color); border-radius:10rem;
   padding:.5rem 1.4rem .5rem 1.1rem; font-size:1.4rem; font-weight:600; text-transform:capitalize;
}
/* Symbol im Chip ohne eigenen Rahmenkasten */
.posts-container .box-container .box .post-admin i{
   width:auto; height:auto; line-height:1; font-size:1.3rem; border:none; background:none; color:var(--main-color); margin-right:.5rem;
}
.posts-container .box-container .box .post-admin a{ font-size:1.4rem; }
.posts-container .box-container .box .post-cat:hover{ background:var(--accent); color:var(--black); }
.posts-container .box-container .box .datum{ font-size:1.4rem; color:var(--light-color); margin-top:0; }
.posts-container .box-container .box .post-title{
   font-size:2.1rem; font-weight:600; line-height:1.3; color:var(--black); white-space:normal;
   display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; margin:.4rem 0 1.2rem;
}
.posts-container .box-container .box .post-title:hover{ color:var(--main-color); }
.posts-container .box-container .box .post-image{
   aspect-ratio:4/3; object-fit:contain; background:#313035; border-radius:1.2rem; margin:0 0 1.4rem; display:block; /* Teaserbilder sind 612x612 auf #313035: nichts abschneiden */
}
.posts-container .box-container .box .post-content{ font-size:1.7rem; color:#41576a; flex:1; }
.posts-container .box-container .box .icons{
   margin-top:1.2rem; border:none; border-radius:1rem; padding:1rem 1.6rem; background:var(--accent-soft);
}
.posts-container .box-container .box .icons i{ font-size:1.6rem; color:var(--main-color); }
.posts-container .box-container .box .icons span{ font-size:1.6rem; }

/* Buttons */
.btn,.inline-btn{ border-radius:10rem; padding:1rem 2.6rem; font-size:1.6rem; font-weight:600; transition:background .15s ease, transform .15s ease; }
.inline-btn::after{ content:" \2192"; }
.btn:hover,.inline-btn:hover{ background-color:var(--black); transform:translateY(-.1rem); }

/* Fussleiste */
.footer{ border-top:.1rem solid var(--accent); font-size:1.3rem; padding:.3rem; line-height:1.6; }   /* schmale Fussleiste wie micha-it (Hoehe wie dort: 28 px) */

/* ---- Teil 2 (20.09.2026): Symbol-Karten, Autor/Impressum, 404, einheitliche Breite ------------------ */
.header .flex{ max-width:1200px; margin:0 auto; }   /* Kopfzeile immer gleich breit (style2.css macht sonst jedes section 800 px) */
/* Breiten: Standard 1200 px (Kopfzeile wie Inhalt); Beitragsseite und Werkzeug-Seiten laden weiterhin style2.css (Lesebreite 800 px). */
.kicker{ text-transform:uppercase; letter-spacing:.22em; font-size:1.3rem; font-weight:600; color:var(--main-color); text-align:center; }
.page-intro{ text-align:center; max-width:70rem; margin:0 auto 1rem; font-size:1.7rem; line-height:1.55; color:var(--light-color); }
.beitraege-seite .heading,.projekte-seite .heading,.autor-seite .heading,.egg-seite .heading{ margin-bottom:1rem; }

/* Karten mit Symbol statt Vorschaubild */
.projekt-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(29rem,1fr)); gap:2.2rem; margin-top:2.4rem; }
.projekt-karte{
   position:relative; display:flex; flex-direction:column; background:#fff; border-radius:1.6rem; overflow:hidden;
   box-shadow:var(--box-shadow); color:var(--black); transition:transform .18s ease, box-shadow .18s ease;
}
.projekt-karte:hover{ transform:translateY(-.4rem); box-shadow:0 1rem 3rem rgba(31,51,65,.14); }
.projekt-karte .platzhalter{
   display:grid; place-items:center; aspect-ratio:16/8; font-size:5.2rem; color:var(--main-color);
   background:linear-gradient(135deg,var(--accent-soft),#fff 55%,var(--accent-soft)); border-bottom:.1rem solid #e2eef3;
}
.projekt-karte .txt{ display:flex; flex-direction:column; flex:1; padding:1.8rem 2rem 2.2rem; }
.projekt-karte .nr{ font-size:1.3rem; letter-spacing:.12em; text-transform:uppercase; color:var(--light-color); }
.projekt-karte h2{ font-size:2.1rem; font-weight:600; line-height:1.3; padding:.5rem 0 .6rem; }
.projekt-karte p{ font-size:1.55rem; line-height:1.55; color:#41576a; text-align:left; padding:0; margin-bottom:1rem;
   display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.projekt-karte .mehr{ margin-top:auto; font-size:1.5rem; font-weight:600; color:var(--main-color); }
.projekt-karte .mehr i{ font-size:1.2rem; margin-left:.3rem; transition:transform .15s ease; }
.projekt-karte:hover .mehr i{ transform:translateX(.3rem); }
.beitrag-link{ color:var(--black); }
.beitrag-link::after{ content:""; position:absolute; inset:0; }       /* ganze Karte klickbar */
.beitrag-link:hover{ color:var(--main-color); }
.beitrag-kat{ position:relative; z-index:1; color:var(--main-color); font-weight:600; }
.beitrag-kat:hover{ color:var(--black); }
.projekt-grid .empty{ grid-column:1/-1; }

/* Autor- und Impressum-Seite: Profilkarte links, Textkarten rechts */
.autor-grid{ display:grid; grid-template-columns:30rem minmax(0,1fr); gap:2.4rem; align-items:start; margin-top:2.4rem; }
.autor-profil,.autor-block{ background:#fff; border-radius:1.6rem; box-shadow:var(--box-shadow); }
.autor-profil{ padding:2.4rem 2rem; text-align:center; position:sticky; top:10rem; }
.autor-profil .autorbild{ display:block; width:20rem; height:20rem; object-fit:cover; margin:0 auto 1.6rem; border-radius:50%; border:.4rem solid var(--accent); }
.autor-profil h2{ font-size:2.2rem; font-weight:600; padding:0 0 .4rem; }
.autor-profil .autor-zahl{ font-size:1.6rem; color:var(--light-color); padding:0 0 1.6rem; }
.autor-profil .autor-zahl strong{ color:var(--main-color); font-size:2rem; }
.autor-text{ display:grid; gap:2rem; }
.autor-block{ padding:2.6rem 3rem; }
.autor-block h2{ font-size:2.4rem; font-weight:600; padding:0 0 1rem; }
.autor-block p,.autor-block li{ font-size:1.7rem; line-height:1.65; text-align:left; }
.autor-block p{ padding:.6rem 0; }
.autor-block ul{ padding:.4rem 0 0 2.4rem; list-style:disc; }
.autor-block li{ padding:.4rem 0; }
.autor-info{ text-align:left; }
.autor-info p{ font-size:1.6rem; line-height:1.6; padding:.6rem 0; text-align:left; }
.autor-info .emailbild{ height:2rem; vertical-align:middle; }
.autor-block .impressum,.autor-block .impressum p{ font-size:1.55rem; line-height:1.7; text-align:left; }
.autor-block .impressum a{ color:var(--main-color); text-decoration:underline; }
@media (max-width:800px){
   .autor-grid{ grid-template-columns:minmax(0,1fr); }
   .autor-profil{ position:static; }
   .autor-block{ padding:2rem 1.8rem; }
}

/* 404-Seite: Animation im Seitenlayout, skaliert mit der Breite */
.egg-wrap{ max-width:80rem; margin:2rem auto 0; }
.egg-wrap .canvas{ width:100%; }
.egg-wrap .canvas canvas{ display:block; margin:0 auto; max-width:100%; border-radius:1.6rem; box-shadow:var(--box-shadow); touch-action:none; }
.egg-zurueck{ text-align:center; margin-top:2rem; }
.egg-zurueck .btn{ display:inline-block; width:auto; min-width:22rem; }

/* ---- Teil 3 (20.09.2026) --------------------------------------------------------------- */
/* Fussleiste bekommt einen z-index unter der Kopfzeile (1000); sonst scheinen positionierte Elemente (Kategorie-Labels) durch */
.footer{ z-index:900; }
.header{ background-color:#fff; }
/* Zweit-Button (z. B. "Neu mischen" in der Lernkartei): Mint statt Orange */
.inline-option-btn,.option-btn{ background-color:var(--accent-soft); color:var(--main-color); border-radius:10rem; padding:1rem 2.6rem; font-size:1.6rem; font-weight:600; }
.inline-option-btn:hover,.option-btn:hover{ background-color:var(--accent); color:var(--black); }

/* Ausgeklappte Suche auf Handy/Tablet: volle Breite, deckend, wie im Original (mein Pillen-Stil hatte die Handy-Regel ueberschrieben) */
@media (max-width:768px){
   .header .flex .search-form{ border-radius:0; padding:2rem; border-left:none; border-right:none; background-color:#fff; }
}