@charset "UTF-8";
/* CSS Document – layworks.css (bereinigt) */

/* =========================================
   GRUNDLAYOUT / STANDARD > 2200px
========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px !important;
}

body {
    background-color: #dddddd;
    font-family: system-ui, -apple-system, sans-serif;
    min-height: 100vh;
	display: flex;
    flex-direction: column;
}

/* --- Logo (NSKGRAFIKWORKS) --- */
.site-header {
    position: absolute;
    top: 124px;
    left: 108px;
}

.logo-link {
    display: inline-block;
    line-height: 0;
}

.logo {
    height: 29px;
    width: auto;
    display: block;
}

/* --- Brand-Label --- */
.brand-label {
    position: absolute;
    top: 338px;
    left: 108px;
    display: flex;
    align-items: baseline;
    white-space: nowrap;
}

.brand-label-tag {
    font-size: 4.40rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #ffffff;
    font-style: italic;
    background-color: #000000;
    padding: 0.1em 0.45em 0.15em 0.4em;
    line-height: 1.15;
}

.brand-label-client {
    font-size: 4.40rem;
    font-weight: 400;
    letter-spacing: 0.015em;
    color: #000;
    font-style: normal;
    margin-left: 0.35em;
}

/* --- Galerie --- */
.gallery-container {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.6rem;
    width: calc(100% - 54px);      /* 2 × 54px Seitenabstand */
    margin: 513px auto 0 auto;      /* Label-Unterkante + Abstand */
    max-width: 100%;
}

.gallery-link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.gallery-item {
    position: relative;
    display: block;
    margin: 0;
    aspect-ratio: 3 / 4;          /* Kachel-Format */
    overflow: hidden;
    background-color: #f0f0f0;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;           /* ganzes Motiv, unverzerrt, zentriert */
	object-position: center middle;   /* ← horizontal links, oben angeschlagen */
    display: block;
    transition: filter 0.3s ease;
}

.gallery-link:hover .gallery-item img {
    filter: brightness(0.4);
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    background: rgba(34, 34, 34, 0.4);
}

.gallery-link:hover .gallery-overlay {
    opacity: 1;
}

/* --- Text-/Infozeile unter der Galerie --- */
.info-line {
    text-align: left;
    font-size: 1.61rem;
    line-height: 1.4;
    color: #000;
    margin-left: 108px;
    margin-top: 80px;
	margin-bottom: 50px;
    max-width: calc(100% - 216px);
}

.info-line p {
    margin: 0;
}

.info-line p + p {
    margin-top: 0.4em;
}

/* --- Footer (Grundlayout VOR den Breakpoints!) --- */
.site-footer {
    height: 161px;                  /* > 2200px */
}

/* --- Abstand Galerie → Footer (wie lay) --- */
main.content {
    padding-bottom: 115px;
}

.inside-label {
    margin-right: 0.8em;
	font-weight: 800;
    letter-spacing: 0.04em;
    font-style: italic;
}

/* =========================================
   BREAKPOINT ≤ 1800px (Standard)
========================================= */
@media (max-width: 1800px) {
    .site-header {
        top: 115px;
        left: 100px;
    }
    .logo {
        height: 27px;
    }
    .brand-label {
        top: 316px;
        left: 100px;
    }
    .brand-label-tag,
    .brand-label-client {
        font-size: 4.12rem;
    }
    .gallery-container {
		grid-template-columns: repeat(4, minmax(0, 1fr));
        width: calc(100% - 50px);
        margin-top: 487px;
    }
    .site-footer {
        height: 151px;
    }
    main.content {
        padding-bottom: 105px;
    }
	.info-line {
    font-size: 1.505rem;
	line-height: 1.4;
    margin-left: 100px;
    margin-top: 75px;
    max-width: calc(100% - 200px);
	}
}

/* =========================================
   BREAKPOINT ≤ 1500px
========================================= */
@media (max-width: 1500px) {
    .site-header {
        top: 107px;
        left: 93px;
    }
    .logo {
        height: 25px;
    }
    .brand-label {
        top: 296px;
        left: 93px;
    }
    .brand-label-tag,
    .brand-label-client {
        font-size: 3.83rem;
    }
    .gallery-container {
        width: calc(100% - 46.5px);
        margin-top: 454px;
    }
    .site-footer {
        height: 141px;
    }
    main.content {
        padding-bottom: 90px;
    }
	.info-line {
    font-size: 1.4rem;
	line-height: 1.4;
    margin-left: 93px;
    margin-top: 68px;
    max-width: calc(100% - 186px);
	}
}

/* =========================================
   BREAKPOINT ≤ 1024px (4→2 Spalten)
========================================= */
@media (max-width: 1024px) {
    .site-header {
        top: 90px;
        left: 79px;
    }
    .logo {
        height: 21px;
    }
    .brand-label {
        top: 252px;
        left: 79px;
    }
    .brand-label-tag,
    .brand-label-client {
        font-size: 3.20rem;
    }
    .gallery-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
        width: calc(100% - 39.5px);
        margin-top: 379px;
    }
    .site-footer {
        height: 120px;
    }
    main.content {
        padding-bottom: 70px;
    }
	.info-line {
    font-size: 1.197rem;
	line-height: 1.4;
    margin-left: 79px;
    margin-top: 53px;
    max-width: calc(100% - 158px);
	}
}

/* =========================================
   BREAKPOINT ≤ 800px
========================================= */
@media (max-width: 800px) {
    .site-header {
        top: 80px;
        left: 70px;
    }
    .logo {
        height: 19px;
    }
    .brand-label {
        top: 227px;
        left: 70px;
    }
    .brand-label-tag,
    .brand-label-client {
        font-size: 2.86rem;
    }
    .gallery-container {
        width: calc(100% - 35px);
        margin-top: 338px;
    }
    .site-footer {
        height: 106px;
    }
    main.content {
        padding-bottom: 60px;
    }
	.info-line {
    font-size: 1.178rem;
	line-height: 1.4;
    margin-left: 70px;
    margin-top: 45px;
    max-width: calc(100% - 140px);
	}
}

/* =========================================
   BREAKPOINT ≤ 600px (2→1 Spalte)
========================================= */
@media (max-width: 600px) {
    .site-header {
        top: 70px;
        left: 61px;
    }
    .logo {
        height: 16px;
    }
    .brand-label {
        top: 200px;
        left: 61px;
    }
    .brand-label-tag,
    .brand-label-client {
        font-size: 2.51rem;
    }
    .gallery-container {
		grid-template-columns: minmax(0, 1fr);
        width: calc(100% - 30.5px);
        margin-top: 295px;
    }
    .site-footer {
        height: 93px;
    }
    main.content {
        padding-bottom: 50px;
    }
	.info-line {
    font-size: 1.122rem;
	line-height: 1.4;
    margin-left: 61px;
    margin-top: 38px;
    max-width: calc(100% - 122px);
	}
}

/* =========================================
   BREAKPOINT ≤ 400px
========================================= */
@media (max-width: 400px) {
    .site-header {
        top: 59px;
        left: 51px;
    }
    .logo {
        height: 13px;
    }
    .brand-label {
        top: 171px;
        left: 51px;
    }
    .brand-label-tag,
    .brand-label-client {
        font-size: 1.54rem;
    }
    .gallery-container {
		grid-template-columns: minmax(0, 1fr);
        width: calc(100% - 25.5px);
        margin-top: 238px;
    }
    .site-footer {
        height: 76px;
    }
    main.content {
        padding-bottom: 48px;
    }
	.info-line {
    font-size: 1.08rem;
	line-height: 1.4;
    margin-left: 51px;
    margin-top: 38px;
    max-width: calc(100% - 102px);
	}
}