/* ==========================================================================
pmedien GmbH – Website
1. Fonts
2. Design-Tokens
3. Reset & Basis
4. Layout-Bausteine
5. Kopfbereich / Logo
6. Hero
7. Kacheln
8. Slider
9. Footer
10. Nach-oben-Button
11. Rechts-Unterseiten
12. Responsive
========================================================================== */
/* 1. Fonts ---------------------------------------------------------------- */
/* Mundial wird per Typekit geladen (siehe im jeder Seite). */
/* 2. Design-Tokens -------------------------------------------------------- */
:root {
--color-bg: #000000;
--color-bg-alt: #1a1a1a;
--color-surface: #333333;
--color-text: #ffffff;
--color-text-muted: #b4b4b4;
--color-accent: #f1033b;
--color-accent-hover: #ff2a5b;
--color-line: #333333;
--font-base: "mundial", "Helvetica Neue", Helvetica, Arial, sans-serif;
--wrap: 1180px;
--gutter: clamp(1.5rem, 6vw, 6rem);
--section-space: clamp(4rem, 9vw, 8rem);
--transition: 0.25s ease;
}
/* 3. Reset & Basis -------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 2rem;
-webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
body {
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-base);
font-size: 0.875rem;
font-weight: 400;
line-height: 1.75;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img,
svg {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
color: inherit;
background: none;
border: 0;
cursor: pointer;
}
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
}
/* 4. Layout-Bausteine ----------------------------------------------------- */
.wrap {
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section {
position: relative;
padding-block: var(--section-space);
overflow: hidden;
}
.section--alt {
background: var(--color-bg-alt);
}
/* Überschriften: Versalien, leichter Schnitt, weit gesetzt – wie im Entwurf */
.section__title {
font-size: clamp(1.7rem, 3.4vw, 2.6rem);
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.02em;
text-transform: uppercase;
max-width: 20ch;
margin-bottom: 2.25rem;
}
.section__lead {
color: var(--color-text-muted);
max-width: 62ch;
margin-bottom: 2.5rem;
}
.prose {
max-width: 58ch;
}
.prose p {
color: var(--color-text-muted);
margin-bottom: 1.5rem;
}
.prose p:last-child {
margin-bottom: 0;
}
/* Dreieck-Deko: rein dekorativ, immer bündig an der Oberkante der Sektion.
Die Grafiken liegen als austauschbare SVGs in img/deco/. */
.deco {
position: absolute;
top: 0;
z-index: 0;
pointer-events: none;
width: min(46vw, 520px);
}
.deco--right {
right: -4rem;
}
.deco--left {
left: -4rem;
}
.section > .wrap {
position: relative;
z-index: 1;
}
/* 5. Kopfbereich / Logo --------------------------------------------------- */
.masthead {
padding-block: clamp(1.75rem, 4vw, 2.75rem);
}
.masthead__logo img {
width: clamp(150px, 16vw, 190px);
}
/* 6. Hero ----------------------------------------------------------------- */
.hero {
padding-top: clamp(1.5rem, 5vw, 3.5rem);
padding-bottom: clamp(2.5rem, 6vw, 4rem);
}
.hero__headline {
font-size: clamp(2rem, 5vw, 3.6rem);
font-weight: 400;
line-height: 1.16;
letter-spacing: 0.01em;
text-transform: uppercase;
max-width: 14ch;
}
/* 7. Kacheln -------------------------------------------------------------- */
.tiles {
padding-bottom: clamp(3.5rem, 8vw, 6rem);
}
.tiles__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(0.75rem, 1.6vw, 1.1rem);
list-style: none;
}
/* Der Query-Container sitzt auf dem , nicht auf der Kachel selbst: Ein Element
kann seine eigene Container-Größe nicht abfragen. Die li-Breite ist exakt die
Kachelbreite – damit beziehen sich alle cqw-Werte unten sauber darauf. */
.tiles__grid li {
container-type: inline-size;
}
.tile {
position: relative;
display: flex;
align-items: flex-end;
justify-content: flex-start;
aspect-ratio: 1 / 1;
/* Text unten links: 7 % Abstand links, 10 % unten (Bezug: Kachelbreite) */
padding: 0 7cqw 10cqw;
overflow: hidden;
background-color: var(--color-surface);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transition: transform var(--transition);
}
/* Kachel-Grafiken (aus img/) je Position */
.tiles__grid li:nth-child(1) .tile { background-image: url("../img/kachel_0.svg"); }
.tiles__grid li:nth-child(2) .tile { background-image: url("../img/kachel_1.svg"); }
.tiles__grid li:nth-child(3) .tile { background-image: url("../img/kachel_2.svg"); }
.tiles__grid li:nth-child(4) .tile { background-image: url("../img/kachel_3.svg"); }
/* Beim Hover die rote Variante derselben Grafik:
helle Fläche #F1033B, dunkle Fläche #C90231. Sie liegt als ::before darüber
und wird eingeblendet, damit der Wechsel weich läuft. */
.tile::before {
content: "";
position: absolute;
inset: 0;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
opacity: 0;
transition: opacity var(--transition);
}
.tiles__grid li:nth-child(1) .tile::before { background-image: url("../img/kachel_0_hover.svg"); }
.tiles__grid li:nth-child(2) .tile::before { background-image: url("../img/kachel_1_hover.svg"); }
.tiles__grid li:nth-child(3) .tile::before { background-image: url("../img/kachel_2_hover.svg"); }
.tiles__grid li:nth-child(4) .tile::before { background-image: url("../img/kachel_3_hover.svg"); }
.tile:hover,
.tile:focus-visible {
transform: translateY(-3px);
}
.tile:hover::before,
.tile:focus-visible::before {
opacity: 1;
}
/* Versalhöhe soll 8,6 % der Kachelbreite betragen. Die font-size ist nicht die
Versalhöhe, sondern die Em-Höhe – daher durch das Cap-Height-Verhältnis der
Schrift teilen (Mundial ≈ 0.72 em). Stimmt die Versalhöhe nicht exakt, ist
--cap-ratio die einzige Stellschraube. */
.tile__label {
--cap-height: 8.6;
--cap-ratio: 0.72;
position: relative;
z-index: 1;
color: var(--color-text);
font-size: 1.4rem; /* Fallback ohne Container-Queries */
/* Nach oben gedeckelt: Auf Tablet/Mobil werden die Kacheln breiter, 8,6 % ihrer
Breite wären dort überdimensioniert. Der Deckel entspricht der Desktop-Größe. */
font-size: min(calc(var(--cap-height) * 1cqw / var(--cap-ratio)), 1.75rem);
font-weight: 400;
line-height: 1.2;
/* Ohne Laufweite: "INSTALLATION" füllt die Kachelbreite bei 8,6 % Versalhöhe
fast vollständig aus und darf nicht umbrechen. */
letter-spacing: 0;
text-transform: uppercase;
hyphens: none;
}
/* 8. Slider --------------------------------------------------------------- */
.slider {
position: relative;
}
.slider__viewport {
overflow: hidden;
}
.slider__track {
display: flex;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
/* Immer genau ein Bild groß im Blick */
.slide {
flex: 0 0 100%;
min-width: 0;
}
/* Gilt für ![]()
und