/* lennartbader.de – written with love and lots of coffee by lennart bader */

/* ---------- Schriften (lokal, kein Google) ---------- */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/playfair-display-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/playfair-display-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(fonts/playfair-display-latin-400-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(fonts/playfair-display-latin-ext-400-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/lato-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/lato-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/lato-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/lato-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------- Grundlagen ---------- */
:root {
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Lato", "Helvetica Neue", Arial, sans-serif;
  --header: 72px;
  --gap: 60px;
  --edge: 30px;
  --cols: 3;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: #000; font: 16px/1.2 var(--sans); }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, p { margin: 0; font-weight: 400; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: #000; color: #fff; padding: 8px 12px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

/* ---------- Preloader ---------- */
.preloader { position: fixed; inset: 0; z-index: 200; background: #fff; display: grid; place-items: center;
  transition: opacity .6s ease;
  /* Notbremse, falls JavaScript abstürzt – JS schaltet sie beim Start sofort ab */
  animation: preloader-fallback .6s ease 8s forwards; }
.preloader img { width: 200px; max-width: 45vw; height: auto; animation: pulse 1.6s ease-in-out infinite; }
.preloader.done { opacity: 0; pointer-events: none; }
@keyframes preloader-fallback { to { opacity: 0; visibility: hidden; } }
@keyframes pulse { 50% { opacity: .55; } }

/* ---------- Header ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; height: var(--header); z-index: 20; background: #fff;
  display: flex; align-items: center; justify-content: flex-end; padding: 0 15px 0 40px; }
.logo { position: absolute; left: 40px; top: 10px; }
.logo img { height: 50px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav > a { text-transform: uppercase; letter-spacing: 1.5px; padding: 4px 8px; margin: 0 10px; transition: box-shadow .4s, background-color .2s; }
.site-nav > a[aria-current] { box-shadow: none; }
.mail { padding: 5px 7px; box-shadow: inset 0 0 0 2px #333; transition: box-shadow .6s, background-color .6s, color .6s; }
.mail-wrap { position: relative; display: inline-flex; flex-direction: column; align-items: flex-end; margin-left: 10px; }
.mail-hint { position: absolute; top: 100%; right: 4px; padding-top: 4px; font-size: 12.8px; font-style: italic; white-space: nowrap; opacity: 0; transition: opacity .4s; pointer-events: none; }
.mail-wrap:hover .mail-hint, .mail.copied + .mail-hint, .mail:focus-visible + .mail-hint { opacity: 1; }
@media (hover: hover) and (min-width: 1025px) {
  .site-nav > a:hover { box-shadow: inset 0 0 0 2px #333; }
  .site-nav > a:active { background: #aaa; }
  .mail:hover { box-shadow: inset 0 0 0 30px #000; background: #000; color: #fff; }
}
.menu-toggle { display: none; }

@media (max-width: 1024px) {
  .logo { left: 25px; top: 13px; }
  .logo img { height: 45px; }
  .menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 10px 8px; position: relative; z-index: 30; }
  .menu-toggle span { display: block; height: 2px; background: #000; transition: transform .3s, opacity .3s; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .site-nav { position: fixed; inset: 0; z-index: 25; background: #fff; flex-direction: column; justify-content: center; gap: 24px;
    opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
  .site-nav.open { opacity: 1; visibility: visible; }
  .site-nav > a { font-family: var(--serif); text-transform: none; letter-spacing: 0; font-size: 34px; }
  .mail-wrap { margin: 16px 0 0; align-items: center; }
  .mail-hint { position: static; opacity: 1; padding-top: 8px; }
  body.menu-open { overflow: hidden; }
}

/* ---------- Footer ---------- */
.site-footer { text-align: center; font-size: 12px; color: #414141; padding: 8px 5px 10px; line-height: 1.5; }
.site-footer a { color: #bbb; transition: color .3s; }
.site-footer a:hover { color: #000; }

/* ---------- Startseite ---------- */
.home main { padding-top: calc(var(--header) + 100px); }
.intro { font-family: var(--serif); font-size: 50px; line-height: 68px; padding: 0 var(--edge); margin-bottom: 60px; max-width: 1400px; }

.grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); column-gap: var(--gap); padding: 0 var(--edge) 50px; align-items: start; }
.grid.masonry { grid-auto-rows: 4px; }
.tile { position: relative; display: block; margin-bottom: var(--gap); }
.tile-media { position: relative; display: block; aspect-ratio: var(--r, auto); background: var(--c); overflow: hidden; }
.tile-media img { width: 100%; height: 100%; object-fit: cover; }
.tile-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
/* schwarzes Overlay (blendet langsam ein) */
.tile-media::after { content: ""; position: absolute; inset: 0; z-index: 2; background: #000; opacity: 0; transition: opacity 3s ease; }
/* weißer Rahmen: eigene Ebene, immer voll deckend – wirkt wie ein Beschnitt von außen */
.tile-media::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 0 0 #fff; transition: box-shadow 1.5s ease-in-out; }
.tile-text { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; color: #fff; padding: 0 20px; opacity: 0; transition: opacity .3s; text-shadow: 0 0 6px rgba(0,0,0,.35); }
.tile-title { font-family: var(--serif); font-size: 30px; line-height: 40px; }
.tile--long .tile-title { font-size: 26px; line-height: 34px; }
.tile-sub { font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 20px; }
@media (hover: hover) and (min-width: 1025px) {
  .tile img { transition: transform 12s cubic-bezier(.19,1,.22,1); }
  .tile:hover img, .tile:focus-visible img { transform: scale(1.1); }
  .tile:hover .tile-media::after, .tile:focus-visible .tile-media::after { opacity: 1; }
  .tile:hover .tile-media::before, .tile:focus-visible .tile-media::before { box-shadow: inset 0 0 0 14px #fff; }
  /* Video-Kachel: beim Hovern läuft das Video statt des Bildes, ohne Abdunklung */
  .tile--video:hover video { opacity: 1; }
  .tile--video:hover .tile-media::after { opacity: 0; }
  .tile--video:hover img { transform: none; }
  .tile:hover .tile-text, .tile:focus-visible .tile-text { opacity: .9; }
}
@media (min-width: 1025px) and (max-width: 1279px) { .tile-title { font-size: 24px; } }
@media (min-width: 1601px) { :root { --cols: 4; } .tile-title { font-size: 36px; line-height: 44px; } .tile--long .tile-title { font-size: 30px; } }
@media (min-width: 2200px) { .tile-title { font-size: 45px; line-height: 54px; } }
@media (max-width: 1024px) {
  :root { --cols: 2; --gap: 24px; --edge: 20px; }
  .tile-text { opacity: 1; text-shadow: 0 0 10px rgba(0,0,0,.45); }
  .tile-title { font-size: 22px; line-height: 30px; }
  .tile--long .tile-title { font-size: 20px; }
  .intro { font-size: 40px; line-height: 1.25; }
}
@media (max-width: 640px) {
  :root { --cols: 1; --gap: 18px; --edge: 10px; }
  .home main { padding-top: calc(var(--header) + 40px); }
  .intro { font-size: 35px; padding: 0 28px; margin-bottom: 40px; }
}

/* Handy: aktive Kachel (Bildschirmmitte) bekommt eine leise Version des Desktop-Hovers */
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .tile img { transition: transform 8s cubic-bezier(.19,1,.22,1); }
  .tile.is-active img { transform: scale(1.04); }
  .tile-media::before { transition: box-shadow 1s ease-in-out; }
  .tile.is-active .tile-media::before { box-shadow: inset 0 0 0 5px #fff; }
  .tile .tile-text { opacity: .72; transition: opacity .6s ease; }
  .tile.is-active .tile-text { opacity: 1; }

  /* Haarlinie zwischen Titel und Ort: wächst von der Mitte nach außen, Enden laufen weich aus 
  .tile-title::after { content: ""; display: block; width: 84px; height: 1px; margin: 9px auto 7px;
    background: linear-gradient(90deg, transparent, #fff 40%, #fff 60%, transparent);
    filter: drop-shadow(0 0 1px rgba(0,0,0,.35));
    transform: scaleX(0); transform-origin: center;
    transition: transform .5s cubic-bezier(.4,0,.2,1); }
  .tile.is-active .tile-title::after { transform: scaleX(1);
    transition: transform 3s cubic-bezier(.19,1,.22,1) .35s; }
}   */

/* ---------- Projektseite ---------- */
.project-title { position: fixed; top: 75px; left: 20px; z-index: 5; color: #fff; pointer-events: none;
  animation: fade-in .5s ease 6s both; }
.project-title a { pointer-events: auto; }
.project-title h1 { font-family: var(--serif); font-size: 64px; line-height: 80px; text-shadow: 1px 4px 5px rgba(0,0,0,.15); }
.project-title p { color: rgba(255,255,255,.9); text-transform: uppercase; font-size: 14.4px; line-height: 1.2; margin-top: -.3em; text-shadow: 0 0 6px rgba(0,0,0,.25); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.g { margin: 0; position: relative; background: var(--c); }
.g img, .g video { width: 100%; height: 100%; object-fit: cover; }
.g picture { display: contents; }
/* Bild blendet über der Platzhalterfarbe ein, statt "reinzuploppen" */
.js .g img { opacity: 0; transition: opacity .35s ease; }
.js .g img.loaded { opacity: 1; }

@media (min-width: 1025px) {
  .project { overflow: hidden; }
  .project main { position: fixed; inset: var(--header) 0 50px 0; }
  .gallery { height: 100%; display: flex; gap: 30px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    scrollbar-width: none; overscroll-behavior-x: contain; outline: none; }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery { user-select: none; -webkit-user-select: none; }
  .gallery.has-cursor { cursor: none; }
  /* eigener Pfeil-Cursor: invertiert sich gegen den Hintergrund -> immer sichtbar, ohne Rand */
  .gal-cursor { position: fixed; left: 0; top: 0; z-index: 10; width: 46px; height: 46px; margin: -23px 0 0 -23px;
    pointer-events: none; color: #fff; mix-blend-mode: difference; opacity: 0; transition: opacity .2s; will-change: transform; }
  .gal-cursor.on { opacity: 1; }
  .gal-cursor svg { width: 100%; height: 100%; display: block; transition: transform .25s ease; }
  .gal-cursor.prev svg { transform: scaleX(-1); }
  .gal-cursor.press svg { transform: scale(.85); }
  .gal-cursor.prev.press svg { transform: scaleX(-1) scale(.85); }
  .g img, .g video { -webkit-user-drag: none; pointer-events: none; }
  .g { flex: 0 0 auto; height: 100%; aspect-ratio: var(--r); scroll-snap-align: start; }
  .project .site-footer { position: fixed; inset: auto 0 0 0; height: 50px; display: flex; flex-direction: column; justify-content: center; padding: 0; }
  .gallery-nav { position: absolute; right: 0; bottom: 10px; z-index: 5; display: flex; mix-blend-mode: exclusion; }
  .gallery-nav button { padding: 6px 15px 6px 6px; }
  .gallery-nav img { width: 22px; height: 8px; transition: transform .3s; }
  .gallery-nav [data-prev]:hover img { transform: translateX(-4px); }
  .gallery-nav [data-next]:hover img { transform: translateX(4px); }
  .back { position: absolute; left: 1px; bottom: 0; z-index: 5; padding: 12px 12px 12px 10px; transition: background-color .5s; }
  .back img { height: 22px; width: auto; opacity: .7; transition: opacity .5s; }
  .back:hover { background: rgba(0,0,0,.7); }
  .back:hover img { opacity: 1; }
}
@media (max-width: 1024px) {
  .project main { padding-top: var(--header); }
  .project-title { top: 80px; left: 15px; }
  .project-title h1 { font-size: 46px; line-height: 1; padding-bottom: 6px; }
  .gallery { display: flex; flex-direction: column; gap: 10px; }
  .g { width: 100%; aspect-ratio: var(--r); }
  .gallery-nav { display: none; }
  .back { position: fixed; left: 0; bottom: 0; z-index: 5; padding: 12px; background: rgba(0,0,0,.45); }
  .back img { height: 20px; width: auto; }
}
@media (max-width: 480px) { .project-title h1 { font-size: 35px; } }

/* ---------- Textseiten ---------- */
.page main { padding: calc(var(--header) + 80px) 20px 60px; }
.text-page { max-width: 820px; margin: 0 auto; font-size: 15px; line-height: 1.65; color: #222; }
.text-page h1 { font-family: var(--serif); font-size: 50px; line-height: 1.2; text-align: center; margin-bottom: 40px; }
.text-page h2 { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; margin: 2.2em 0 .6em; color: #000; }
.text-page p { margin: 0 0 1em; }
.text-page a { text-decoration: underline; text-underline-offset: 2px; }
.text-page.center { text-align: center; }
.text-page .lead { font-family: var(--serif); font-style: italic; font-size: 20px; }
.gif404 { margin: 20px auto 30px; width: 360px; max-width: 100%; height: auto; }
.mail--inline { box-shadow: none; padding: 0; text-decoration: underline; text-underline-offset: 2px; }

.contact { max-width: 1100px; margin: 0 auto; text-align: center; }
.contact-gif { margin: 0 auto 50px; width: 480px; height: auto; }
.mail-big { display: flex; flex-direction: column; align-items: center; margin-bottom: 80px; }
.mail-big .mail { font-family: var(--serif); font-size: 50px; line-height: 1.3; padding: 5px 14px 10px; box-shadow: inset 0 0 0 3px #333; }
.mail-big .mail-hint { position: static; padding-top: 10px; font-size: 14px; }
.mail-big:hover .mail-hint { opacity: 1; }
@media (hover: hover) { .mail-big .mail:hover { box-shadow: inset 0 0 0 60px #000; background: #000; color: #fff; } }
.contact-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; text-align: center; padding-bottom: 40px; }
.contact-cols h2 { font-size: 16px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 16px; }
.contact-cols p { font-size: 18px; line-height: 1.6; }
.clients { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 30px; line-height: 1.7; }
@media (max-width: 760px) {
  .contact-cols { grid-template-columns: 1fr; gap: 40px; }
  .mail-big .mail { font-size: clamp(22px, 7vw, 40px); }
  .contact-gif { margin-bottom: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}