/* ==================================================================
           FARBMARKEN (Licht und Dunkel)
           ------------------------------------------------------------------
           Dieselben Marken wie in lw-theme/style.css - diese Seite laedt die
           Theme-Datei nicht mit, deshalb stehen sie hier noch einmal.
           Werden sie dort geaendert, hier mitziehen (und in /projects/).
           Dunkel steht unter :root und ist der Ausgangszustand; ohne
           Javascript bleibt die Seite genau wie bisher.
           ================================================================== */
        :root {
            color-scheme: dark;
            color-scheme: only dark;   /* "only": kein Nachfaerben, siehe Hell-Block */

            --bg-ground: #0b1114;
            --bg-body: #101416;
            --bg-panel: #1a1f22;
            --bg-raised: #242b30;

            --text-primary: #e0e6ed;
            --text-secondary: #94a3b8;
            --text-placeholder: #475569;

            --accent: #2ba6df;
            --on-accent: #0b1114;
            --accent-wash: rgba(43, 166, 223, 0.10);
            --accent-line: rgba(43, 166, 223, 0.35);

            --border: #2d3748;
            --border-photo: #20262b;

            --header-bg: rgba(26, 31, 34, 0.9);
            --overlay: rgba(8, 11, 13, 0.94);
            --overlay-soft: rgba(11, 17, 20, 0.4);

            --glow-1: rgba(43, 166, 223, 0.12);
            --glow-2: rgba(43, 166, 223, 0.08);
            --glow-3: rgba(43, 166, 223, 0.05);

            --shadow-card: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            --shadow-menu: 0 22px 34px -16px rgba(0, 0, 0, 0.8);
            --shadow-soft: 0 10px 20px -5px rgba(0, 0, 0, 0.4);

            --ok: #33ff11;
            --fail: #ff3300;

            --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }

        :root[data-theme="light"] {
            /* "only" verbietet dem Browser, selbst nachzufaerben. Chrome auf
               Android verdunkelt sonst bei eingeschaltetem Dunkelmodus auch das
               helle Design noch einmal - die Seite bleibt dann trotz gewaehlter
               Sonne dunkel. Nur "dark" oder das Wort "only" schalten das ab,
               blosses "light" genuegt nicht. Die Zeile ohne "only" bleibt als
               Rueckfall fuer Browser, die "only" nicht kennen. Samsung Internet
               achtet auf nichts davon - dazu das Kopfskript. */
            color-scheme: light;
            color-scheme: only light;

            --bg-ground: #e8eef4;
            --bg-body: #f1f5f9;
            --bg-panel: #ffffff;
            --bg-raised: #eaf0f6;

            --text-primary: #15212c;
            --text-secondary: #4d6070;
            --text-placeholder: #8b9cad;

            /* Das Markenblau #2ba6df ist auf Weiss zu schwach fuer Text,
               deshalb eine dunklere Stufe derselben Farbe. */
            --accent: #0b6f9f;
            --on-accent: #ffffff;
            --accent-wash: rgba(11, 111, 159, 0.08);
            --accent-line: rgba(11, 111, 159, 0.30);

            --border: #d2dce6;
            --border-photo: #dde5ee;

            --header-bg: rgba(255, 255, 255, 0.9);
            --overlay: rgba(232, 238, 244, 0.96);
            --overlay-soft: rgba(226, 233, 240, 0.55);

            --glow-1: rgba(43, 166, 223, 0.14);
            --glow-2: rgba(43, 166, 223, 0.10);
            --glow-3: rgba(43, 166, 223, 0.07);

            --shadow-card: 0 18px 40px -20px rgba(23, 42, 61, 0.28);
            --shadow-menu: 0 20px 32px -18px rgba(23, 42, 61, 0.35);
            --shadow-soft: 0 8px 18px -6px rgba(23, 42, 61, 0.22);

            --ok: #0f7a35;
            --fail: #c62222;
        }

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

        body {
            background-color: var(--bg-ground);

            background-image:
                radial-gradient(circle at 15% 50%, var(--glow-1), transparent 40%),
                radial-gradient(circle at 85% 20%, var(--glow-2), transparent 40%),
                radial-gradient(circle at 50% 100%, var(--glow-3), transparent 60%);

            background-attachment: fixed;

            color: var(--text-primary);
            font-family: var(--font-main);
            line-height: 1.6;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 14px;
        }

        .site-container {
		    position: relative;
            width: 100%;
            max-width: 1100px;
            background-color: var(--bg-panel);
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid var(--border);
            box-shadow: var(--shadow-card);
        }

        header {
            padding: 12px 30px;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--header-bg);
            backdrop-filter: blur(5px);
        }

        .site-branding {
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--accent);
            text-decoration: none;
            flex-shrink: 0;
        }

        /* Zwei Bilddateien fuer die Marke, weil der dunkle Grund in der
           eingebetteten Fassung eingebacken ist und im hellen Design als
           dunkles Rechteck stehenbliebe. /lw-logo-hell.png ist dieselbe
           Zeichnung freigestellt und in der hellen Akzentfarbe #0b6f9f -
           derselben, in der der Schriftzug daneben steht. Wird --accent im
           Hell-Block geaendert, ist die Datei neu zu erzeugen; sie folgt der
           Marke nicht. Ohne Javascript steht kein data-theme am <html>, dann
           bleibt die dunkle Fassung sichtbar - wie bisher. */
        .site-branding .lw-logo-hell { display: none; }
        :root[data-theme="light"] .site-branding .lw-logo-dunkel { display: none; }
        :root[data-theme="light"] .site-branding .lw-logo-hell { display: block; }

        .site-title {
            font-size: 1.1rem;
            font-weight: 700;
            letter-spacing: -0.5px;
			padding-top: 17px;
			white-space: nowrap;
        }

       nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
    align-items: center; 
}

nav a.nav-cta {
    background-color: var(--accent);
    color: var(--on-accent);
    padding: 8px 18px;
    border-radius: 6px;
    font-weight: 700;
    transition: opacity 0.2s, transform 0.2s;
}

nav a.nav-cta:hover {
    color: var(--on-accent);
    opacity: 0.9;
    transform: translateY(-1px);
}

        nav a {
            text-decoration: none;
            color: var(--text-secondary);
            font-size: 0.9rem;
            transition: color 0.2s;
        }
		nav a svg {
            fill: var(--text-secondary);
		}

        nav a:hover {
            color: var(--accent);
        }
		nav a svg:hover {
            fill: var(--accent);
		}

        nav .active {
            color: var(--text-primary);
            font-weight: 600;
        }

        main {
            display: grid;
            grid-template-columns: 0.82fr 1.18fr;
            gap: 40px;
            padding: 8px 20px;
        }

        .profile-panel {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-right: 1px solid var(--border);
            padding-right: 40px;
        }

        .profile-photo-container {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            overflow: hidden;
            border: 4px solid var(--border-photo);
            margin-bottom: 10px;
            box-shadow: var(--shadow-soft);
        }

        .profile-photo-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 0%;
        }

        .profile-name {
            font-size: 2.2rem;
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 10px;
            letter-spacing: -1px;
            text-transform: uppercase;
        }

        .profile-title {
            font-size: 1rem;
            color: var(--text-secondary);
            font-weight: 400;
            margin-bottom: 12px;
            line-height: 1.4;
        }

        .profile-bio {
            font-size: 0.95rem;
            color: var(--text-secondary);
            max-width: 400px;
        }

        .info-panel {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .card-heading {
            font-size: 1rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--text-secondary);
        }

        .section-title {
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 6px;
            color: var(--text-primary);
            text-transform: uppercase;
        }

        .section-content {
            font-size: 0.95rem;
            color: var(--text-secondary);
        }

        .spec-list {
            list-style: none;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px 8px;
        }

        .spec-list li {
            position: relative;
            padding-left: 15px;
            line-height: 1.4;
            color: var(--text-secondary);
            font-size: 0.95rem;
        }

        .spec-list li::before {
            content: "•";
            position: absolute;
            left: 0;
            color: var(--accent);
            font-size: 1.2rem;
            line-height: 1;
            top: -2px;
        }

        .contact-links {
            display: flex;
            gap: 12px;
            margin-bottom: 20px;
        }

        .contact-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 8px;
            background-color: var(--bg-raised);
            color: var(--text-secondary);
            text-decoration: none;
            transition: background 0.2s, color 0.2s;
            border: 1px solid transparent;
        }

        .contact-icon:hover {
            background-color: var(--border);
            color: var(--accent);
            border-color: var(--accent);
        }

        .contact-form {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .contact-form input,
        .contact-form textarea {
            width: 100%;
            padding: 9px 14px;
            background-color: var(--bg-body);
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--text-primary);
            font-family: var(--font-main);
            font-size: 0.9rem;
            transition: border-color 0.2s;
        }

        .contact-form input::placeholder,
        .contact-form textarea::placeholder {
            color: var(--text-placeholder);
        }

        .contact-form input:focus,
        .contact-form textarea:focus {
            outline: none;
            border-color: var(--accent);
        }

        .contact-form textarea {
            resize: vertical;
        }

        .form-helper {
            font-size: 0.85rem;
            color: var(--text-secondary);
            font-style: italic;
            margin-bottom: 5px;
        }

        .contact-form button {
            background-color: var(--accent);
            color: var(--on-accent);
            border: none;
            padding: 9px 22px;
            border-radius: 6px;
            font-weight: 700;
            font-size: 0.95rem;
            cursor: pointer;
            transition: background-color 0.2s, opacity 0.2s;
            align-self: flex-start;
        }

        .contact-form button:hover {
            opacity: 0.9;
        }

        @media (max-width: 768px) {
		        .site-title {
            font-size: 1rem;
}

        nav a {
            font-size: 0.8rem;
}


        .profile-name {
            font-size: 2.1rem;
}

        .profile-title {
            font-size: 0.9rem;
        }

        .profile-bio {
            font-size: 0.85rem;
}


        .card-heading {
            font-size: 0.9rem;
        }

        .section-title {
            font-size: 1.1rem;
        }

        .section-content {
            font-size: 0.85rem;
}
            main {
                grid-template-columns: 1fr;
                padding: 25px;
                gap: 30px;
            }

            .profile-panel {
                border-right: none;
                border-bottom: 1px solid var(--border);
                padding-right: 0;
                padding-bottom: 30px;
            }

            .profile-photo-container {
			width: 180px;
    height: 180px;
			}
			.profile-photo-container img {
        height: 100%;
    }

		 header > a > img {
		  width: 48px !important;
		  height: 32px !important;
		 }
        }
		
		.contact-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.contact-header .section-title {
    margin-bottom: 0; 
}

.contact-links {
    display: flex;
    gap: 12px;
    margin-bottom: 0; 
}

.grecaptcha-badge {
    visibility: hidden !important;
}
.stats4u {
float: right;
    padding-top: 14px;
}
.stats4u img {
filter: hue-rotate(29deg); 
}


        @media (max-width: 440px) {
		.contact-icon{
		 width:30px;
		 height:30px;
		}

}

        @media (max-width: 420px) {
.stats4u {
float: none;
    padding-top: 0;
    margin-top:30px;
	display: block;
	text-align: center;
}
}


.imprint-box {
    display: flex;
    align-items: center; /* Środkuje pionowy tekst z blokiem adresu */
    justify-content: center; /* Utrzymuje całość na środku kolumny */
    gap: 15px; /* Odstęp między napisem IMPRINT a danymi */
    margin-top: 12px;
}

.imprint-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: var(--accent);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 4px;
    opacity: 0.8;
    border-right: 1px solid var(--border);
    padding-right: 12px;
}

.imprint-text {
    text-align: left !important;
    margin: 0 !important;
}

/* Rechtstexte unter der Anschrift - liegen als WordPress-Seiten im Blog. */
.imprint-legal {
    display: inline-block;
    margin-top: 9px;
    font-size: 0.85rem;
}

.imprint-legal a {
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.imprint-legal a:hover,
.imprint-legal a:focus-visible {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.imprint-legal-sep {
    margin: 0 8px;
    color: var(--text-secondary);
    opacity: 0.45;
}

        @media (max-width: 400px) {
.imprint-vertical {
    font-size: 1.7rem;
}


		        .site-title {
            font-size: 0.9rem;
}

        nav a {
            font-size: 0.7rem;
}


        .profile-name {
            font-size: 2rem;
}

        .profile-title {
            font-size: 0.8rem;
        }

        .profile-bio {
            font-size: 0.75rem;
}


        .card-heading {
            font-size: 0.8rem;
        }

        .section-title {
            font-size: 1rem;
        }

        .section-content {
            font-size: 0.75rem;
}
            main {
                grid-template-columns: 1fr;
                padding: 15px;
                gap: 20px;
            }

            .profile-panel {
                border-right: none;
                border-bottom: 1px solid var(--border);
                padding-right: 0;
                padding-bottom: 20px;
            }

            .profile-photo-container {
			width: 180px;
    height: 180px;
			}
			.profile-photo-container img {
        height: 100%;
    }

		 header > a > img {
		  width: 40px !important;
		  height: 28px !important;
		 }
        }


}