:root {--primary: #e63a40;--secondary: #e95055;--accent: #3b82f6;--text: #1f2937;--light-text: #6b7280;--dark-text: #333;--background: #f9fafb;--white: #fff;--black: #000;--dark-grey: #222;--grey-light:  #e8e8e8;--transition: all 0.3s ease;}* {margin: 0; padding: 0; box-sizing: border-box; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}body {font-family: 'Noto Sans', sans-serif; color: var(--text); overflow-x: hidden; height: 100%; line-height: 1.5rem;}h1, h2, h3, h4 {margin-bottom: 1rem;}a {text-decoration: none; color: var(--primary);}ul {list-style: none;}img {max-width: 100%; height: auto; display: block;}.row-gap {padding-bottom: 2rem}hr[class^="hr"] {border: none; height: 1px; background: var(--grey-light); margin: 1.5rem auto}hr[class^="hr"]:last-child {display: none}hr.tl {display: none; border: none; height: 1px; background: var(--grey-light); margin: 1.5rem 0}.wdth-50 {width: 50%;}.truncate {display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word;}.fnt200 {font-weight: 200;}.fnt500 {font-weight: 500;}.fnt600 {font-weight: 600;}.upper {text-transform: uppercase;}.mrgn-top-1 {margin-top: 1rem}.mrgn-top-15 {margin-top: 1.5rem}.mrgn-top-2 {margin-top: 2rem}.mrgn-bottom-1 {margin-bottom: 1rem}.mrgn-bottom-15 {margin-bottom: 1.5rem}.mrgn-bottom-2 {margin-bottom: 2rem}.pdgn-bottom-1 {padding-bottom: 1rem}.pdgn-bottom-15 {padding-bottom: 1.5rem}.pdgn-bottom-2 {padding-bottom: 2rem}.bottom-aligned {align-self: end;}header {position: fixed; margin-bottom: 7rem; top: 0; left: 0; width: 100%; z-index: 1000; background: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); transition: var(--transition)}.scrolled {background: #fff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2)}.con-head, .con-foot {width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1.5rem}.ghost-logo {height: 5rem; margin: -0.5rem;}.ghost-logo:hover {filter: drop-shadow(2px 6px 2px #bbb);}.navbar {display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 0;}.logosvg {width: 100px; height: auto}.nav-menu {display: flex; gap: 2rem; margin-left: auto;}.nav-item {position: relative}.nav-link {font-weight: 400; transition: var(--transition); padding: 0.2rem 0; color: #222}.nav-link:hover {color: var(--primary);}.nav-link.active {color: var(--primary)}.nav-link.active::after {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px;}.hamburger {display: none; cursor: pointer; margin-left: auto; padding-right: 1rem}.hamburger .bar {display: block; width: 25px; height: 3px; margin: 5px auto; background: var(--text); transition: var(--transition)}#main {background: #fff; padding-bottom: 5rem; margin-top: 9rem}#main-extra {padding-bottom: 5rem; margin-top: 2rem;}#kategorie {background: #fff; padding-bottom: 5rem;}.home-grid {display: grid; grid-template: repeat(2, auto) / 600px repeat(2, 1fr); grid-template-areas: "Main Side1 Side2" "Main Side1 Side2"; column-gap: 2rem; width: 100%; max-width: 1280px; margin: 2rem auto 3rem auto;}.article-title-grid {display: grid; grid-template-columns: 1fr; gap: 2rem; width: 100%; max-width: 1280px; margin: 3rem auto;}.article-grid {display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; width: 100%; max-width: 1280px; margin: 3rem auto; grid-auto-rows: auto;}.home-col {display: block; width: 100%;}.extra-grid {display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 2rem; width: 100%; max-width: 1280px; margin: 2rem auto; padding-top: 0.5rem;}.extra-grid-title { grid-row: 1 / span 1; grid-column: 1 / span 4; color: #999; font-size: 1.3rem; font-weight: 500; margin-bottom: 1.2rem;}.extra-grid-title a {background: var(--primary); padding: 0rem 1.5rem 0rem 0.5rem; display: inline; color: #fff; border: 2px solid var(--primary); transition: var(--transition);}.extra-grid-title a:hover {background: #fff; color: var(--primary);}.cat-grid {display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 2rem; width: 100%; max-width: 1280px; margin: 3rem auto;}.cat-grid-title { grid-row: 1 / span 1; grid-column: 1 / span 5; color: var(--primary); font-size: 1.5rem; font-weight: 500; margin-bottom: 1.2rem;}.cat-grid-title::before {content: '\205D'; margin-right: 0.3rem; vertical-align: middle; display: inline-block; margin-top: -5px;}.block-split {display: grid; grid-template-columns: auto 60%; column-gap: 2rem;}.block {display: block; width: 100%;}.area-main {grid-area: Main;}.area-side1 {grid-area: Side1;}.area-side2 {grid-area: Side2;}.block-image {position: relative}.block-image:hover::before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.2); opacity: 1; transition: opacity 0.3s ease; z-index: 1;}.block-title {font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem}.block-category-date {font-size: 0.8rem; line-height: 0.8rem; color: #999;}.block-category-date span {color: var(--primary); text-transform: uppercase; font-weight: 600;}.block-excerpt {font-size: 0.9rem; font-weight: 400; margin-top: 1rem;}.create-edit {color: var(--white); background: var(--primary); padding: 0.5rem 1rem; border-radius: 5px; border: 2px solid var(--primary);}.create-edit:hover {color: var(--primary); border-color: var(--primary); background: var(--white)}.card-image {position: relative}.card-image::before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.2); opacity: 0; transition: opacity 0.5s ease; z-index: 1;}.card-image:hover::before {opacity: 1;}.card-image-title {display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, auto); position: absolute; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.6); max-width: 100%;}.card-title {font-size: 1.1rem; font-weight: 700;}.div1 {grid-column: span 2 / span 2; color: var(--white); font-weight: 500; font-size: 1.3rem; padding: 0.7rem 1rem;}.div2 {grid-row-start: 2; font-size: 0.8rem; color: #fff; padding: 0.2rem 1rem 0.7rem 1rem; z-index: 2;}.div2 span {text-transform: uppercase; font-weight: 700}.image-link {position: relative; width: 100%; display: inline-block; overflow: hidden;}.image-link img {display: block; width: 100%; height: auto;}.image-link::after {content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: white; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; z-index: 1}.image-link:hover::after {opacity: 0.2;}.grid-main {display: grid; grid-template-columns: 600px 1fr; gap: 2rem; padding: 3rem 1rem; width: 100%; max-width: 1280px; min-height: 100vh; margin: 0 auto}.grid-articles {display: grid; grid-template-columns: 850px 1fr; gap: 2rem; margin: 3rem auto; width: 100%; max-width: 1280px; min-height: 100vh;}.grid-article-sub {display: block; width: 100%;}.grid-main-sub1 {display: grid; grid-template-rows: auto auto 1fr; gap: 2rem}.grid-main-sub2 {display: grid; grid-template-columns: 1fr 1fr; gap: 2rem}.grid-main-article {display: block}.grid-split {display: grid; grid-template-columns: 1fr 60%; gap: 1rem; margin-bottom: 2rem}.grid-cell, .grid-cell-ex {display: block}.divider {border-top: 3px solid #ee7c80; padding-top: 1.5rem}.link {color: var(--text);}.link:hover {color: var(--primary)}.btn {display: inline-block; padding: 1rem 2rem; background: var(--primary); color: var(--white); font-weight: 500; transition: var(--transition); border: 2px solid var(--primary); border-radius: 0.3rem; cursor: pointer; font-size: 1.2rem}.btn:hover {color: var(--primary); background: transparent}.btn-outline {background: transparent; border: 2px solid var(--primary); color: var(--primary)}.btn-outline:hover {background: var(--primary); color: var(--white)}.section {padding: 6rem 0}.section-title {font-size: 2.5rem; font-weight: 700; margin-bottom: 2rem; text-align: center; position: relative}.section-title::after {content: ''; position: absolute; bottom: -0.8rem; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background: var(--primary); border-radius: 2px}.section-subtitle {text-align: center; color: var(--light-text); max-width: 700px; margin: 0 auto 3rem; font-size: 1.1rem}.card-title2 {font-size: 1rem; font-weight: 600; margin: 1rem 0 0.5rem 0}.card-title3 {font-size: 1rem; font-weight: 600}.card-date {font-size: 0.8rem; margin: 0.4rem 0; color: #777;}.card-date2 {font-size: 0.8rem; margin-bottom: 1.5rem; color: #777;}.card-date span {color: var(--primary); font-weight: 700;}.card-category {position: absolute; bottom: 0; right: 0; padding: 0.2rem 0.6rem; font-size: 0.8rem; color: var(--white); background: var(--primary); font-weight:700; text-transform: uppercase; z-index: 2;}.card-excerpt {font-size: 0.9rem}.article-content {padding-top: 0rem; line-height: 1.8rem}.article-content p, .article-content h2, .article-content h3 {margin: 2rem 0;}.article-img {width: 600px; height: 380px}.about-content {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 3rem; align-items: center}.about-img {border-radius: 0.5rem; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1)}.about-text h2 {font-size: 2rem; margin-bottom: 1.5rem}.about-text p {margin-bottom: 1.5rem; color: var(--light-text)}.about-features {margin-top: 2rem}.feature-item {display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem}.feature-icon {font-size: 1.5rem; color: var(--primary); margin-top: 0.3rem}.form {width: 100%; max-width: 1280px; margin: 3vh auto 0 auto; padding: 2rem 1rem}.form-block {margin-bottom: 2rem;}.form-label-create, .form-label-edit {background: var(--primary); padding: 0.1rem 1.5rem 0.1rem 0.5rem; display: inline; color: #fff; font-weight: 500;}.form-label-create {background: #237538;}.form-label-edit {background: var(--primary)}.form-control {width: 100%; padding: 0.8rem; border: 1px solid var(--grey-light); font-family: inherit; font-size: 1rem; transition: var(--transition)}.form-control:focus {outline: none; background: #d3f8d3; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2)}textarea {min-height: 150px; resize: vertical}input[type="file"] {padding: 2rem 1rem; margin-bottom: 2rem;}footer {background: var(--dark-grey); color: var(--white); padding: 3rem 0 1.5rem; margin-bottom:0}.footer-content {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin-bottom: 2rem; text-align: center}.footer-logo {height: 4rem; width: auto; margin: 1rem auto}.footer-logo span {font-weight: 300; color: #999}.footer-about p {color: var(--grey-light); margin-bottom: 1.5rem;}.social-links {display: flex; gap: 1rem}.social-link {display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: var(--white); transition: var(--transition)}.social-link:hover {background: var(--primary); transform: translateY(-3px)}.footer-links h3 {font-size: 1.2rem; margin-bottom: 1.5rem; position: relative}.footer-links h3::after {content: ''; position: absolute; bottom: -0.5rem; left: 0; width: 40px; height: 2px; background: var(--primary)}.footer-links ul {display: flex; flex-direction: column; gap: 0.8rem}.footer-links a {color: var(--grey-light); transition: var(--transition)}.footer-links a:hover {color: var(--primary); padding-left: 0.3rem}.footer-bottom {text-align: center; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); color: var(--grey-light); font-size: 0.9rem}.back-to-top {position: fixed; bottom: 2rem; right: 2rem; width: 50px; height: 50px; background: var(--primary); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); cursor: pointer; opacity: 0; visibility: hidden; transition: var(--transition); z-index: 999}.back-to-top.active {opacity: 1; visibility: visible}.back-to-top:hover {background: var(--primary); transform: translateY(-3px)}@media screen and (max-width: 1320px) {.con-head {background-position: left 1rem center}.nav-menu {padding-right: 1rem}#main, #main-extra {padding: 0 2rem}.article-grid {grid-template-columns: repeat(4, 1fr);}.cat-grid {grid-template-columns: repeat(4, 1fr);}.cat-grid-title {grid-column: 1 / span 4;}.grid-articles {grid-template-columns: 850px}.grid-article-sub {display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 2rem;}.grid-article-sub {border-top: 1px solid var(--grey-light); padding-top: 2rem;}}@media screen and (max-width: 1000px) {.grid-main-sub2 {display: block}.grid-articles {display: grid; grid-template-columns: 1fr}.home-grid {grid-template: repeat(2, auto) / 1fr 1fr; grid-template-areas: "Main Main" "Side1 Side2";}.extra-grid {grid-template-columns: repeat(2, 1fr);}.extra-grid .block:not(:last-child) {padding-bottom: 2rem;}.extra-grid-title { grid-row: 1 / span 1; grid-column: 1 / span 2; }.article-grid {grid-template-columns: repeat(3, 1fr);}.cat-grid {grid-template-columns: repeat(3, 1fr);}.cat-grid-title {grid-column: 1 / span 3;}hr.hr1:last-child {display: block}hr.hr2:last-child {display: none}.truncate {-webkit-line-clamp: 6; line-clamp: 6}.section {padding: 4rem 0}.section-title {font-size: 2.2rem}.about-content {grid-template-columns: 1fr}.about-img {order: -1; max-width: 600px; margin: 0 auto;}header {position: relative; margin-bottom: 0;}.hamburger {display: block;}.hamburger.active .bar:nth-child(1) {transform: translateY(8px) rotate(45deg)}.hamburger.active .bar:nth-child(2) {opacity: 0}.hamburger.active .bar:nth-child(3) {transform: translateY(-8px) rotate(-45deg)}.nav-menu {position: absolute; top: 6rem; left: -100%; width: 100%; height: 100%; background: var(--white); flex-direction: column; gap: 0; padding: 2rem 0; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);transition: var(--transition);}.nav-menu.active {left: 0}.nav-item {width: 100%; margin: auto; text-align: center; padding: 1rem 0; background: var(--white);}.nav-item:last-child {padding-bottom: 4rem; box-shadow: 0 1rem 0.7rem rgba(0, 0, 0, 0.1);}.nav-link.active::after {display: none}.btn {width: 100%; max-width: 250px}#main {margin-top: 0rem}.ghost-logo {height: 4rem; margin: -0.5rem; margin-left: 0;}.ghost-logo:hover{filter:none;}.cat-grid, .grid-articles {margin-top: 2rem}}@media screen and (max-width: 900px) {.grid-main {display: block;}.grid-main-sub2 {display: grid; grid-template-columns: 1fr 1fr; gap: 2rem}.article-grid {grid-template-columns: repeat(2, 1fr);}.cat-grid {grid-template-columns: repeat(2, 1fr);}.cat-grid-title {grid-column: 1 / span 2;}}@media screen and (max-width: 800px) {.truncate {-webkit-line-clamp: 4; line-clamp: 4;}.grid-article-sub {grid-template-columns: repeat(2, 1fr);}}@media screen and (max-width: 768px) {.truncate {-webkit-line-clamp: 3; line-clamp: 3;}}@media screen and (max-width: 700px) {.truncate {-webkit-line-clamp: 2; line-clamp: 2;}}@media screen and (max-width: 650px) {.truncate {display: block; -webkit-line-clamp: unset; line-clamp: unset; -webkit-box-orient: unset; overflow: visible; text-overflow: unset;}.block-split {display: grid; grid-template-columns: 1fr}.block-split a {margin-bottom: 1.5rem}}@media screen and (max-width: 550px) {.section-title {font-size: 2rem}#home {background-position: -105vh}.grid-main-sub2 {display: block;}.grid-cell-ex {height: 3px; background: red}.grid-split {display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; width: 100%}.div1 {font-size: 1.1rem}.home-grid {grid-template: auto / 1fr; grid-template-areas: "Main" "Side1" "Side2";}hr.hr2:last-child {display: block}.extra-grid {grid-template-columns: 1fr;}.extra-grid .block:not(:last-child) {padding-bottom: 2rem;}.extra-grid-title { grid-row: 1; grid-column: 1; }.article-grid {grid-template-columns: 1fr;}.cat-grid {grid-template-columns: 1fr;}.cat-grid-title {grid-column: 1 / span 1;}.grid-article-sub {grid-template-columns: 1fr;}}@media screen and (max-width: 450px) {#main {padding: 0 1.5rem}.row-gap {padding-bottom: 1.5rem}hr[class^="hr"] {margin: 1.3rem 0}hr.tl {display: block}.card-image {position: relative}.card-image-title {display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(2, auto); position: relative; background: none; margin-top: 1.5rem}.div1 {display: inline-block; color: var(--text); font-weight: 700; font-size: 1.1rem; padding: 0;}.div2 {display: inline-block; font-size: 0.8rem; line-height: 0.8rem; color: #999; z-index: 2; padding: 0; margin-top: 0.5rem}.div2 span {color: var(--primary)}.row-gap {padding-bottom: 0}}
