body,h1,h2,h3,h4,h5,h6 {
    font-family: "Lato", sans-serif;
}
 body, html {
     height: 100%;
     color: #777;
     line-height: 1.8;
}
/* Create a Parallax Effect */
 .bgimg-1, .bgimg-2, .bgimg-3 {
     background-attachment: fixed;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
}
/* Images */
 .bgimg-1 {
     background-image: url("/assets/parallax1.jpg");
     min-height: 75vh;
}
 .bgimg-2 {
     background-image: url("/assets/parallax2.jpg");
     min-height: 400px;
}
 .bgimg-3 {
     background-image: url("/assets/parallax3.jpg");
     min-height: 400px;
}
/* Logo im Hero etwas tiefer */
 .bgimg-1 .w3-display-middle {
     top: 60%;
     transform: translate(-50%, -50%);
}
 .w3-wide {
    letter-spacing: 10px;
}
 .w3-hover-opacity {
    cursor: pointer;
}
/* Turn off parallax scrolling for tablets and phones */
 @media only screen and (max-device-width: 1024px) {
     .bgimg-1, .bgimg-2, .bgimg-3 {
         background-attachment: scroll;
         min-height: 400px;
    }
}
/* Navbar Layout */
 #myNavbar {
     display: flex;
     justify-content: space-between;
    /* Logo links, Navigation rechts */
     align-items: center;
     padding: 0 12px;
     background-color: #22543D !important;
}
/* Logo-Link ohne Hover-Effekt */
 .logo-link {
     padding: 0 !important;
     background: none !important;
}
 .logo-header {
     height: 50px;
    /* Logo-Größe */
     width: auto;
     display: block;
}
/* Navigation rechts */
 .nav-right {
     display: flex;
     align-items: center;
     gap: 8px;
}
/* Header-Navigation modern */
 #myNavbar a {
     position: relative;
     color: #fff !important;
     background: #22543D !important;
     border: none;
     transition: all 0.3s ease;
     padding: 12px 18px;
     text-decoration: none !important;
    /* Verhindert Browser-Unterstreichung */
}
/* Underline-Effekt */
 #myNavbar a::after {
     content: "";
     position: absolute;
     left: 15%;
     bottom: 6px;
     width: 0;
     height: 2px;
     background: #fff;
     transition: width 0.3s ease;
}
/* Hover: Button hebt sich + Linie fährt ein */
 #myNavbar a:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
 #myNavbar a:hover::after {
     width: 70%;
}
/* Mobile Dropdown-Menü */
 #navDemo {
     background-color: #22543D !important;
}
 #navDemo a {
     position: relative;
     display: block;
     color: #fff !important;
     background-color: #22543D !important;
     border: none;
     text-decoration: none !important;
     padding: 12px 18px;
     transition: transform .3s ease, box-shadow .3s ease;
}
/* Hover-Effekt wie im Footer */
 #navDemo a:hover, #navDemo a:focus, #navDemo a:active {
     transform: translateY(-2px);
     box-shadow: 0 4px 10px rgba(0,0,0,.2);
}
/* Unterstreichungslinie: links ausgerichtet (beim Textbeginn) */
 #navDemo a::after {
     content: "";
     position: absolute;
     left: 18px;
    /* exakt am Textbeginn (padding-left) */
     bottom: 6px;
     width: 0;
     height: 2px;
     background: #FFFFFF;
     transition: width .3s ease;
}
 #navDemo a:hover::after {
     width: 15%;
    /* Länge der Linie (relativ zum Button), bei Bedarf anpassen */
}
/* Logo bleibt von allen Effekten verschont */
 #myNavbar .logo-link, #myNavbar .logo-link:hover {
     background: none !important;
     box-shadow: none !important;
     transform: none !important;
}
 #myNavbar .logo-link::after {
     display: none;
    /* Underline-Effekt deaktivieren */
}
 :root {
     --logo-scale: 1.2;
    /* 1 = Basis, 1.2 = +20% */
}
/* Logo responsive skalieren – width statt max-width */
 .logo-img {
     width: calc(500px * var(--logo-scale));
    /* Basisbreite * Scale */
     max-width: 90vw;
    /* nicht über 90% Viewportbreite */
     height: auto;
}
/* Tablet */
 @media (max-width: 1024px) {
     .logo-img {
         width: calc(380px * var(--logo-scale));
         max-width: 85vw;
    }
}
/* Smartphone */
 @media (max-width: 600px) {
     .logo-img {
         width: calc(240px * var(--logo-scale));
         max-width: 80vw;
    }
}
/* Hinweisbox rund */
 .hinweis-box {
     position: absolute;
     top: 20%;
     right: 10%;
     background-color: #FFD700;
     color: #22543D;
     width: 170px;
     height: 170px;
     border-radius: 50%;
    /* rund */
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     font-weight: bold;
     font-size: 14px;
     padding: 15px;
     box-shadow: 0 4px 12px rgba(0,0,0,0.2);
     animation: pulse 2s infinite;
}
 @keyframes pulse {
     0% {
         transform: scale(1);
         opacity: 1;
    }
     50% {
         transform: scale(1.05);
         opacity: 0.9;
    }
     100% {
         transform: scale(1);
         opacity: 1;
    }
}
/* Call-to-Action Button */
 .cta-btn {
     background-color: #22543D !important;
     color: #FFFFFF !important;
     padding: 16px 32px !important;
     font-size: 18px !important;
     border-radius: 8px;
     box-shadow: 0 4px 10px rgba(0,0,0,0.2);
     transition: all 0.3s ease;
     display: inline-block;
     text-decoration: none;
     font-weight: 600;
}
 .cta-btn:hover {
     background-color: #FFFFFF !important;
     color: #22543D !important;
     box-shadow: 0 6px 16px rgba(0,0,0,0.3);
     transform: translateY(-2px);
}
 .services {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 20px;
     margin-top: 30px;
}
 .service-box {
     background: white;
     border: 1px solid #e2e8f0;
     padding: 25px;
     border-radius: 10px;
     box-shadow: 0 2px 6px rgba(0,0,0,0.05);
     transition: all 0.3s ease;
}
 .service-box:hover {
     transform: translateY(-3px);
     box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}
/* Logo-Link im Header von Hover-Regeln ausschließen */
 #myNavbar .logo-link:hover {
     background: none !important;
     color: inherit !important;
}
 .service-tile {
     background-color: #fff;
     border: 1px solid #e2e8f0;
     box-shadow: 0 4px 10px rgba(0,0,0,0.08);
     transition: all 0.3s ease;
     min-height: 170px;
}
 .service-tile:hover {
     transform: translateY(-4px);
     box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
 .footer {
     background: #22543D;
     color: #FFFFFF;
     opacity: 0.95;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 16px 32px;
}
/* Linke Buttons untereinander */
 .footer-left {
     display: flex;
     flex-direction: column;
     gap: 6px;
}
/* Mitte wirklich mittig */
 .footer-center {
     text-align: center;
     flex: 1;
}
/* Rechter Platzhalter sorgt für exakte Mitte */
 .footer-right {
     width: 120px;
    /* gleiche Breite wie Footer-Left ungefähr */
}
/* Button-Style wie im Header */
 .footer a.w3-button, .footer a.w3-button:visited {
     position: relative;
     display: inline-block;
     background: #22543D !important;
     color: #FFFFFF !important;
     text-decoration: none !important;
     padding: 6px 12px !important;
     font-size: 14px !important;
     line-height: 1.2 !important;
     border: none !important;
     margin: 6px 0;
    /* vertikaler Abstand */
     transition: transform .3s ease, box-shadow .3s ease;
}
 .footer a.w3-button:hover, .footer a.w3-button:focus, .footer a.w3-button:active {
     background: #22543D !important;
     color: #FFFFFF !important;
     text-decoration: none !important;
     transform: translateY(-2px);
     box-shadow: 0 4px 10px rgba(0,0,0,.2);
}
/* Linie beim Hover */
 .footer a.w3-button::after {
     content: "";
     position: absolute;
     left: 20%;
     bottom: 4px;
     width: 0;
     height: 2px;
     background: #FFFFFF;
     transition: width .3s ease;
}
 .footer a.w3-button:hover::after, .footer a.w3-button:focus::after {
     width: 60%;
}
/* Über-mich: Layout */
 .about-wrap {
     display: grid;
     grid-template-columns: 380px 1fr;
     gap: 28px;
     align-items: start;
}
 @media (max-width: 900px) {
     .about-wrap {
         grid-template-columns: 1fr;
    }
}
/* Profilkarte links */
 .profile-card {
     background:#fff;
     border:1px solid #e2e8f0;
     border-radius:16px;
     padding:20px;
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     text-align:center;
}
 .profile-photo {
     width: 100%;
     max-width: 260px;
     aspect-ratio: 1/1;
     object-fit: cover;
     border-radius: 50%;
     margin: 8px auto 14px;
     display:block;
}
 .profile-name {
     font-size:1.25rem;
     font-weight:700;
     margin:6px 0 2px;
     color:#22543D;
}
 .profile-role {
     color:#4a5568;
     margin-bottom:10px;
}
 .profile-meta {
     color:#4a5568;
     font-size:.95rem;
     line-height:1.6;
}
/* Timeline rechts */
 .timeline {
     position: relative;
     margin: 0;
     padding-left: 32px;
}
 .timeline::before {
     content:"";
     position:absolute;
     left: 8px;
     top: 0;
     bottom: 0;
     width: 2px;
     background: #C6F6D5;
    /* zartes Grün als Linie */
}
 .tl-item {
     position: relative;
     margin: 0 0 18px 0;
     padding-left: 18px;
}
 .tl-item::before {
     content:"";
     position:absolute;
     left: -2px;
     top: 4px;
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background:#22543D;
    /* CI-Punkt */
     box-shadow: 0 0 0 4px #E6FFFA;
    /* zarter Ring */
}
 .tl-year {
     font-weight: 700;
     color:#22543D;
     margin-bottom: 2px;
}
 .tl-text {
     color:#2D3748;
}
/* Flex-Anordnung für Kontaktbereich */
 .contact-flex {
     display: flex;
     flex-wrap: wrap;
     align-items: flex-start;
}
/* Standard: untereinander (mobile) */
 .contact-info {
     order: 1;
     width: 100%;
}
 .office-hours {
     order: 2;
     width: 100%;
     margin-top: 24px;
}
/* Ab 768px: nebeneinander */
 @media (min-width: 768px) {
     .contact-info {
         order: 2;
         width: 66.66%;
        /* m8 */
    }
     .office-hours {
         order: 1;
         width: 33.33%;
        /* m4 */
         margin-top: 0;
    }
}
/* Cookie-Banner Styling */
 #cookie-banner {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     background-color: rgb(119, 119, 119);
     color: white;
     padding: 15px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-family: sans-serif;
}
 #cookie-banner button {
     background-color: rgb(255, 215, 0);
     border: none;
     padding: 8px 16px;
     cursor: pointer;
     font-weight: bold;
     border-radius: 5px;
}
 #cookie-banner button:hover {
     opacity: 0.8;
}

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 18.0px; font: 12.0px Menlo; color: #6d6d6d; -webkit-text-stroke: #6d6d6d}
    p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 18.0px; font: 12.0px Menlo; color: #6b0001; -webkit-text-stroke: #6b0001}
    p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 18.0px; font: 12.0px Menlo; color: #000000; -webkit-text-stroke: #000000}
    p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 18.0px; font: 12.0px Menlo; color: #fb0007; -webkit-text-stroke: #fb0007}
    p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 18.0px; font: 12.0px Menlo; color: #0000ff; -webkit-text-stroke: #0000ff}
    p.p6 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 18.0px; font: 12.0px Menlo; color: #000000; -webkit-text-stroke: #000000; min-height: 14.0px}
    p.p7 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 18.0px; font: 12.0px Menlo; color: #0f7001; -webkit-text-stroke: #0f7001}
    p.p8 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 18.0px; font: 12.0px Menlo; color: #093c94; -webkit-text-stroke: #093c94}
    p.p9 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 18.0px; font: 12.0px Menlo; color: #137646; -webkit-text-stroke: #137646}
    p.p10 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 18.0px; font: 12.0px Menlo; color: #2a2a2a; -webkit-text-stroke: #2a2a2a}
    p.p11 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 18.0px; font: 12.0px Menlo; color: #000000; -webkit-text-stroke: #000000; background-color: #fffffe}
    span.s1 {font-kerning: none; background-color: #fffffe}
    span.s2 {font-kerning: none; color: #fb0007; background-color: #fffffe; -webkit-text-stroke: 0px #fb0007}
    span.s3 {font-kerning: none; color: #2a2a2a; background-color: #fffffe; -webkit-text-stroke: 0px #2a2a2a}
    span.s4 {font-kerning: none; color: #6b0001; background-color: #fffffe; -webkit-text-stroke: 0px #6b0001}
    span.s5 {font-kerning: none; color: #000000; background-color: #fffffe; -webkit-text-stroke: 0px #000000}
    span.s6 {font-kerning: none; color: #0000ff; background-color: #fffffe; -webkit-text-stroke: 0px #0000ff}
    span.s7 {font-kerning: none}
    span.s8 {font-kerning: none; color: #137646; background-color: #fffffe; -webkit-text-stroke: 0px #137646}
    span.s9 {font-kerning: none; color: #093c94; background-color: #fffffe; -webkit-text-stroke: 0px #093c94}
    span.s10 {font-kerning: none; color: #900112; background-color: #fffffe; -webkit-text-stroke: 0px #900112}
    span.s11 {font-kerning: none; color: #2a2a2a; -webkit-text-stroke: 0px #2a2a2a}
    span.s12 {font-kerning: none; color: #6b0001; -webkit-text-stroke: 0px #6b0001}