@charset "utf-8";

/*
* CSS-Design
* Nadja Specht | Grafik- und Webdesign
* Online-Schule für Gestaltung: Webdesign-Kurs Modul 8
*/



/* Farbwerte
Beige (Hintergrund):
rgba(249,247,241,1)
#f9f7f1

Oliv (Flächen, Logo):
rgba(113,113,86,1)
#717156

Salbeigrün (Stichworte im Startfeld):
rgba(174,176,151,1)
#aeb097

Dunkelgrün (Fließtext):
#5a5a44

Fast-Schwarz (Überschriften und Linien):
#1d1d18

Die Farben stehen unten als Variablen, damit der Dunkelmodus sie austauschen kann.
*/



/* Webfonts-Einbindung */

/* Inter Display: naher Ersatz für Inter Tight. Zum Austauschen die Dateien in /fonts ersetzen. */

@font-face {
font-family: "Inter Display";
src: url("../fonts/InterDisplay-Thin.woff") format("woff");
font-weight: 100;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Inter Display";
src: url("../fonts/InterDisplay-Light.woff") format("woff");
font-weight: 300;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Inter Display";
src: url("../fonts/InterDisplay-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}

/* Ogg: Lizenzschrift (Sharp Type). Liegt als Webfont in /fonts, für die Website braucht es eine Webfont-Lizenz.
Lädt Ogg nicht, nutzt die Seite Lora (liegt ebenfalls in /fonts). */

@font-face {
font-family: "Ogg";
src: url("../fonts/Ogg-Regular.woff2") format("woff2"),
url("../fonts/Ogg-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Lora";
src: url("../fonts/Lora-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}



/* Farben und Maße */

:root {
--beige: #f9f7f1;
--weiss: #ffffff;
--dunkel: #1d1d18;
--oliv: #717156;
--text: #5a5a44;
--salbei: #aeb097;
--auf-oliv: #f9f7f1;
--linie: #1d1d18;
--logo: #717156;

--schrift-titel: "Ogg", "Lora", Georgia, "Times New Roman", serif;
--schrift-text: "Inter Display", "Helvetica Neue", Helvetica, Arial, sans-serif;

--rand: clamp(16px, 3vw, 44px);
--innen: clamp(18px, 2.3vw, 38px);
--kopf-hoehe: 84px;
}



/* Dunkelmodus */

@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--beige: #171713;
--weiss: #1f1f1a;
--dunkel: #f1eee2;
--oliv: #4d4d3a;
--text: #c4c6ae;
--salbei: #7d7f66;
--auf-oliv: #f1eee2;
--linie: #4a4a3c;
--logo: #c4c6ae;
color-scheme: dark;
}
}

:root[data-theme="dark"] {
--beige: #171713;
--weiss: #1f1f1a;
--dunkel: #f1eee2;
--oliv: #4d4d3a;
--text: #c4c6ae;
--salbei: #7d7f66;
--auf-oliv: #f1eee2;
--linie: #4a4a3c;
--logo: #c4c6ae;
color-scheme: dark;
}



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


html {
scroll-behavior: smooth;
}



/* Basisformatierung */

body {
font: 300 1.0625rem/1.55 var(--schrift-text);
/* 17px */
color: var(--text);
background: var(--beige);
-webkit-font-smoothing: antialiased;
}

/* Fläche hinter der Statusleiste von Handys (iPhone mit Notch) */
body::before {
content: "";
position: fixed;
inset: 0 0 auto;
height: env(safe-area-inset-top, 0px);
z-index: 60;
background: var(--beige);
}

img {
display: block;
max-width: 100%;
height: auto;
}

a {
color: inherit;
text-decoration: none;
}

button {
font: inherit;
color: inherit;
}

ul {
list-style: none;
}

:focus-visible {
outline: 2px solid var(--dunkel);
outline-offset: 3px;
}

/* Sprungziele landen unter der festen Kopfzeile */
[id] {
scroll-margin-top: calc(var(--kopf-hoehe) + 8px);
}

.sprunglink {
position: absolute;
left: -999px;
top: 8px;
background: var(--dunkel);
color: var(--beige);
padding: 8px 14px;
z-index: 100;
}

.sprunglink:focus {
left: 8px;
}



/* Layout */

.wrapper {
max-width: 1560px;
margin: 0 auto;
padding-left: max(var(--rand), env(safe-area-inset-left, 0px));
padding-right: max(var(--rand), env(safe-area-inset-right, 0px));
}

.rubrik,
.hero,
.kontakt {
margin-top: clamp(40px, 6vw, 96px);
}

.hero {
margin-top: clamp(24px, 3vw, 44px);
}



/* Mosaik */

/* Die Linien sind Ränder der Felder (rechts und unten) plus Rand oben und links am Raster.
Eine 1px-Lücke (gap) würde bei krummen Spaltenbreiten mal 1px, mal 2px breit gerundet. */

.mosaik {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid var(--linie);
border-left: 1px solid var(--linie);
}

.mosaik > * {
min-width: 0;
border-right: 1px solid var(--linie);
border-bottom: 1px solid var(--linie);
}



/* Header */

header {
position: sticky;
top: env(safe-area-inset-top, 0px);
z-index: 50;
background: var(--beige);
border-bottom: 1px solid var(--linie);
}

/* Die Kopfzeile ist das Ziel von "Menü" (#nav-open), ohne Abstand nach oben */
#nav-open {
scroll-margin-top: 0;
}

header .wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
height: var(--kopf-hoehe);
}

#logo {
display: flex;
align-items: center;
gap: 16px;
color: var(--logo);
}

/* Nur das NS-Monogramm aus dem Logo (Ausschnitt der Logo-Vorlage am Seitenende) */
.monogramm {
display: block;
width: 22px;
height: 62px;
color: var(--logo);
}

.logo-text {
font-size: 0.8125rem;
/* 13px */
font-weight: 300;
letter-spacing: 0.22em;
text-transform: uppercase;
line-height: 1.45;
color: var(--dunkel);
}

.logo-text span {
display: block;
color: var(--text);
}



/* Navigation */

nav ul {
display: flex;
gap: clamp(20px, 3.4vw, 56px);
}

nav a {
display: block;
padding: 10px 0;
font-size: 0.8125rem;
/* 13px */
font-weight: 400;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--dunkel);
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease;
}

nav a:hover,
nav a.active {
border-bottom-color: var(--dunkel);
}



/* Responsive Navigation */

.nav-toggle {
display: none;
}

.nav-toggle {
border: 1px solid var(--linie);
padding: 10px 16px;
font-size: 0.8125rem;
/* 13px */
font-weight: 400;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--dunkel);
cursor: pointer;
}



/* Hero */

.hero-text {
grid-column: 1 / 3;
grid-row: 1 / 3;
background: var(--beige);
padding: var(--innen);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 32px;
}

.hero-text h1 {
font-family: var(--schrift-titel);
font-weight: 400;
font-size: clamp(3.4rem, 7.4vw, 7rem);
/* 54px bis 112px */
line-height: 1.05;
letter-spacing: normal;
color: var(--dunkel);
}

.stichworte {
margin-top: clamp(8px, 1.4vw, 20px);
}

.stichworte a {
display: block;
width: fit-content;
font-size: clamp(1.9rem, 3.7vw, 3.5rem);
/* 30px bis 56px */
font-weight: 100;
line-height: 1.18;
letter-spacing: -0.01em;
color: var(--salbei);
transition: color 0.45s ease, transform 0.45s ease;
}

.stichworte a.active,
.stichworte a:hover {
color: var(--dunkel);
transform: translateX(10px);
}

.einleitung {
max-width: 34ch;
font-size: clamp(1rem, 1.25vw, 1.2rem);
/* 16px bis 19px */
color: var(--text);
}

.hero-box {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 1;
background: var(--beige);
}

.hero-box img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.button-hero {
position: absolute;
left: 0;
bottom: 0;
max-width: 100%;
padding: clamp(10px, 1.2vw, 18px) clamp(14px, 1.7vw, 28px);
background: var(--beige);
color: var(--dunkel);
font-size: clamp(1.25rem, 2.2vw, 2.2rem);
/* 20px bis 35px */
font-weight: 100;
line-height: 1.1;
letter-spacing: -0.01em;
hyphens: manual;
transition: background 0.35s ease, color 0.35s ease;
}

.hero-box:hover img,
.hero-box.active img {
transform: scale(1.05);
}

.hero-box:hover .button-hero,
.hero-box.active .button-hero,
.hero-box:focus-visible .button-hero {
background: var(--oliv);
color: var(--auf-oliv);
}



/* Rubriken */

.textfeld,
.listenfeld {
aspect-ratio: 1;
padding: var(--innen);
display: flex;
flex-direction: column;
gap: clamp(10px, 1.4vw, 22px);
}

.textfeld {
background: var(--weiss);
}

.textfeld h2,
.kontakt h2 {
font-size: clamp(1.75rem, 2.6vw, 2.7rem);
/* 28px bis 43px */
font-weight: 100;
line-height: 1.08;
letter-spacing: -0.015em;
color: var(--dunkel);
hyphens: manual;
}

.textfeld p {
font-size: clamp(0.95rem, 1.12vw, 1.12rem);
/* 15px bis 18px */
line-height: 1.55;
}

/* Breites Textfeld über 2 Felder (Webdesign: daneben und darunter fünf Websites und die Liste) */
.textfeld-breit {
grid-column: span 2;
aspect-ratio: auto;
}

.textfeld-breit p {
max-width: 52ch;
}

.listenfeld {
background: var(--oliv);
color: var(--auf-oliv);
justify-content: flex-end;
}

.listenfeld h3 {
font-size: clamp(1.3rem, 1.9vw, 1.9rem);
/* 21px bis 30px */
font-weight: 100;
letter-spacing: -0.01em;
line-height: 1.1;
}

.listenfeld li {
padding: 3px 0;
font-size: clamp(0.92rem, 1.1vw, 1.1rem);
/* 15px bis 18px */
line-height: 1.5;
font-weight: 300;
}

.listenfeld li + li {
border-top: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}



/* Bilder mit Bildtitel */

.bild {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 1;
background: var(--beige);
cursor: zoom-in;
}

.bild img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.bild:hover img {
transform: scale(1.045);
}

.bildtitel {
position: absolute;
left: 0;
bottom: 0;
max-width: 100%;
padding: 9px 14px 8px;
background: var(--beige);
color: var(--dunkel);
font-size: 0.8125rem;
/* 13px */
font-weight: 400;
letter-spacing: 0.06em;
line-height: 1.3;
transform: translateY(101%);
transition: transform 0.35s ease;
}

.bild:hover .bildtitel,
.bild:focus-visible .bildtitel {
transform: translateY(0);
}

/* Auf Touch-Geräten gibt es kein Hover: Bildtitel immer zeigen */
@media (hover: none) {
.bildtitel {
transform: none;
}
}



/* Kontakt */

.kontakt .mosaik {
--linie: var(--auf-oliv);
}

.kontakt .mosaik > * {
background: var(--oliv);
color: var(--auf-oliv);
padding: var(--innen);
}

.kontakt-text {
grid-column: span 2;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 40px;
/* Bezug für die Schriftgröße des Satzes (cqi) */
container-type: inline-size;
}

.kontakt h2 {
font-family: var(--schrift-titel);
font-weight: 400;
letter-spacing: normal;
line-height: 1.12;
color: var(--auf-oliv);
/* Einzeilig und so breit wie das Feld (der Satz ist in Ogg etwa 17,2 × so breit wie hoch), höchstens 40px */
font-size: min(2.5rem, 5.6cqi);
white-space: nowrap;
}

/* Monogramm links, Name rechts daneben */
.kontakt-logo {
display: flex;
align-items: center;
gap: clamp(16px, 2vw, 32px);
color: var(--auf-oliv);
}

.kontakt-monogramm {
display: block;
flex: none;
width: clamp(38px, 4vw, 56px);
height: auto;
aspect-ratio: 70 / 200;
color: var(--auf-oliv);
}

.kontakt-name {
font-size: clamp(0.9rem, 1.5vw, 1.4rem);
/* 14px bis 22px */
font-weight: 300;
letter-spacing: 0.22em;
text-transform: uppercase;
line-height: 1.5;
}

.kontakt-name span {
display: block;
opacity: 0.75;
}

.kontakt dl {
display: grid;
gap: 18px;
align-content: start;
}

.kontakt dt {
font-size: 0.8125rem;
/* 13px */
font-weight: 400;
letter-spacing: 0.22em;
text-transform: uppercase;
opacity: 0.8;
}

.kontakt dd {
margin: 4px 0 0;
font-size: clamp(1.05rem, 1.4vw, 1.4rem);
/* 17px bis 22px */
line-height: 1.4;
}

.kontakt a {
border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
transition: border-color 0.2s ease;
overflow-wrap: anywhere;
}

.kontakt a:hover {
border-bottom-color: currentColor;
}



/* Footer */

footer {
margin-top: clamp(32px, 4vw, 56px);
padding-bottom: 40px;
}

footer .wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 12px 32px;
font-size: 0.8125rem;
/* 13px */
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
}

footer a:hover {
color: var(--dunkel);
}

footer ul {
display: flex;
gap: 28px;
flex-wrap: wrap;
}



/* to top-Button */

#totop {
position: fixed;
right: max(var(--rand), env(safe-area-inset-right, 0px));
bottom: calc(24px + env(safe-area-inset-bottom, 0px));
z-index: 40;
display: none;
}

#totop a {
width: 48px;
height: 48px;
display: grid;
place-items: center;
background: var(--beige);
border: 1px solid var(--linie);
color: var(--dunkel);
transition: background 0.25s ease, color 0.25s ease;
}

#totop a:hover {
background: var(--oliv);
color: var(--auf-oliv);
}

#totop svg {
width: 16px;
height: 16px;
}



/* Bildansicht */

.lightbox {
position: fixed;
inset: 0;
z-index: 90;
display: none;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--beige) 98%, transparent);
padding: calc(64px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) calc(64px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
}

.lightbox.offen {
display: flex;
}

.lightbox figure {
max-width: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
gap: 12px;
align-items: flex-start;
}

/* Jedes Bild im gleichen quadratischen Rahmen, egal wie viele Pixel es hat */
.lightbox img {
width: min(calc(100vw - 40px), calc(100vh - 190px));
width: min(calc(100vw - 40px), calc(100dvh - 190px));
height: auto;
aspect-ratio: 1;
object-fit: contain;
border: 1px solid var(--linie);
background: var(--weiss);
}

.lightbox figcaption {
font-size: 0.8125rem;
/* 13px */
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 400;
color: var(--dunkel);
}

.lb-button {
position: absolute;
width: 48px;
height: 48px;
display: grid;
place-items: center;
background: var(--beige);
border: 1px solid var(--linie);
color: var(--dunkel);
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}

.lb-button:hover {
background: var(--oliv);
color: var(--auf-oliv);
}

.lb-button svg {
width: 18px;
height: 18px;
}

.lb-schliessen {
top: calc(12px + env(safe-area-inset-top, 0px));
right: max(12px, env(safe-area-inset-right, 0px));
}

.lb-zurueck {
left: max(12px, env(safe-area-inset-left, 0px));
top: 50%;
transform: translateY(-50%);
}

.lb-weiter {
right: max(12px, env(safe-area-inset-right, 0px));
top: 50%;
transform: translateY(-50%);
}



/* Impressum und Datenschutz */

.rechtliches {
max-width: 760px;
padding-top: clamp(40px, 6vw, 88px);
padding-bottom: clamp(40px, 6vw, 88px);
}

.rechtliches h1 {
font-family: var(--schrift-titel);
font-weight: 400;
font-size: clamp(2.6rem, 6vw, 4.6rem);
/* 42px bis 74px */
letter-spacing: normal;
color: var(--dunkel);
margin-bottom: 32px;
}

.rechtliches h2 {
font-size: 1.5rem;
/* 24px */
font-weight: 300;
color: var(--dunkel);
margin: 36px 0 8px;
}

.rechtliches h3 {
font-size: 1.1875rem;
/* 19px */
font-weight: 400;
color: var(--dunkel);
margin: 28px 0 6px;
}

.rechtliches h4 {
font-size: 1.0625rem;
/* 17px */
font-weight: 400;
color: var(--dunkel);
margin: 20px 0 4px;
}

.rechtliches p + p,
.rechtliches ul + p {
margin-top: 12px;
}

.rechtliches ul {
list-style: disc;
padding-left: 20px;
margin-top: 12px;
}

.rechtliches li + li {
margin-top: 8px;
}

/* Lange Adressen (z. B. Links) dürfen auf dem Handy umbrechen */
.rechtliches a {
border-bottom: 1px solid currentColor;
overflow-wrap: anywhere;
}

/* Widerspruchsrecht (Art. 21 DSGVO) muss vom übrigen Text getrennt und hervorgehoben sein */
.widerspruch {
margin-top: 28px;
padding: 4px 24px 22px;
border: 1px solid var(--linie);
background: var(--weiss);
}

.rechtliches .quelle {
margin-top: 40px;
font-size: 0.8125rem;
/* 13px */
}




/* Media Queries */

@media only screen and (max-width: 1199px) {

.mosaik {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hero-text,
.textfeld-breit {
grid-column: 1 / -1;
grid-row: auto;
}

.kontakt-text {
grid-column: 1 / -1;
}

}


@media only screen and (max-width: 899px) {

:root {
--kopf-hoehe: 72px;
}

.logo-text {
display: none;
}

/* Responsive Navigation: "Menü" springt auf #nav-open (die Kopfzeile), :target blendet das Menü ein */

.nav-toggle.nav-open {
display: block;
}

.nav-closed,
#nav-open:target .nav-open {
display: none;
}

#nav-open:target .nav-closed {
display: block;
}

.menue {
display: none;
position: absolute;
left: 0;
right: 0;
top: 100%;
background: var(--beige);
border-bottom: 1px solid var(--linie);
padding: 8px max(var(--rand), env(safe-area-inset-left, 0px)) 20px;
}

#nav-open:target .menue {
display: block;
}

nav ul {
flex-direction: column;
gap: 0;
}

nav li + li {
border-top: 1px solid var(--linie);
}

nav a {
padding: 16px 0;
border-bottom: 0;
}

}


@media only screen and (max-width: 699px) {

.mosaik {
grid-template-columns: minmax(0, 1fr);
}

.textfeld,
.listenfeld {
aspect-ratio: auto;
min-height: 0;
}

.listenfeld {
gap: 28px;
}

.hero-text {
gap: 28px;
}

}


/* Weniger Bewegung, wenn im System so eingestellt */

@media (prefers-reduced-motion: reduce) {

html {
scroll-behavior: auto;
}

* {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}

}



/* Druckformatierung */

@media print {

header,
footer,
#totop,
.lightbox {
display: none;
}

body {
background: #fff;
color: #000;
}

h1, h2, h3 {
color: #000;
}

.mosaik {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bildtitel {
transform: none;
}

}