/*
Theme Name: Oliver Mann — Leichtbau
Theme URI: https://oliver-mann.de
Author: Oliver Mann
Author URI: https://oliver-mann.de
Description: Dokumentarische Fotografie, redaktionell und leicht. Passepartouts statt Bildfilter — Schwarzweiß und Farbe gleichberechtigt. Serien als eigener Inhaltstyp, Galerie aus den an die Serie angehängten Bildern.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oliver-mann-leichtbau
Tags: photography, portfolio, editorial, blog, custom-logo, featured-images, translation-ready
*/

/* ============================================================
   TOKENS — Farbe
   Jede Farbe existiert zweimal: als PASTELL-Fläche (Passepartout)
   und als FRISCHER Akzent. Farbe liegt NIE auf den Fotos, nur um
   sie herum — so funktionieren SW und Farbe nebeneinander.
   ============================================================ */
:root {
  --lb-grund:      #FAF8F4;
  --lb-karte:      #FFFFFF;
  --lb-tinte:      #23283B;
  --lb-tinte-soft: #4E5468;
  --lb-tinte-faint:#9AA0B0;
  --lb-linie:      #E7E3DA;

  --lb-rosa:       #F6DCD2;
  --lb-himmel:     #D4E2F5;
  --lb-butter:     #F6EABC;
  --lb-minze:      #D9EBDD;
  --lb-flieder:    #E4DEF2;

  --lb-koralle:    #F4633E;
  --lb-blau:       #3D6FE0;
  --lb-gruen:      #2E9E6B;

  /* Schrift — Adobe-Fonts-Kit sws8tlb, s. functions.php */
  --lb-font-display: 'freight-big-pro', Georgia, serif;
  --lb-font-sans:    'neue-haas-unica', -apple-system, BlinkMacSystemFont, sans-serif;
  --lb-font-mono:    'ibm-plex-mono', ui-monospace, monospace;

  /* Skala */
  --lb-t-display:  clamp(2.8rem, 7.5vw, 6rem);
  --lb-t-h2:       clamp(2rem, 4.2vw, 3.2rem);
  --lb-t-h3:       clamp(1.4rem, 2.4vw, 1.9rem);
  --lb-t-text:     1.05rem;
  --lb-t-label:    .78rem;
  --lb-lh-display: 1.04;
  --lb-lh-text:    1.7;
  --lb-ls-label:   .14em;

  --lb-radius:     1.25rem;
  --lb-radius-s:   .6rem;
  --lb-schatten:   0 1px 2px rgba(35,40,59,.05), 0 12px 32px -12px rgba(35,40,59,.14);
  --lb-schatten-hoch: 0 2px 4px rgba(35,40,59,.06), 0 24px 48px -16px rgba(35,40,59,.22);

  --lb-ease:       cubic-bezier(.22, .8, .26, .99);
  --lb-schnell:    .35s;
  --lb-ruhig:      .8s;
  --lb-drift:      36s;
}

@keyframes lb-schweben {
  0%   { transform: translate(0, 0) rotate(0deg); }
  33%  { transform: translate(2.5%, -4%) rotate(3deg); }
  66%  { transform: translate(-2%, 3%) rotate(-2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes lb-laufband {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   GRUNDLAGEN
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--lb-grund);
  color: var(--lb-tinte-soft);
  font-family: var(--lb-font-sans);
  font-size: var(--lb-t-text);
  line-height: var(--lb-lh-text);
}

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

/* Sprungmarke für Screenreader/Tastatur */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: 1rem; top: 1rem; z-index: 100; padding: .8em 1.4em;
  background: var(--lb-tinte); color: #fff; border-radius: var(--lb-radius-s);
}
:focus-visible { outline: 2px solid var(--lb-koralle); outline-offset: 3px; }

/* ---------- Schwebeformen ---------- */
.schwebe { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.schwebe i { position: absolute; display: block; opacity: .55;
  animation: lb-schweben var(--lb-drift) ease-in-out infinite; }
.schwebe .kreis { width: 34vmax; height: 34vmax; border-radius: 50%;
  background: var(--lb-himmel); top: -12vmax; right: -8vmax; }
.schwebe .quadrat { width: 20vmax; height: 20vmax; border-radius: 12%;
  background: var(--lb-butter); bottom: -8vmax; left: -6vmax;
  animation-duration: calc(var(--lb-drift) * 1.3); animation-direction: reverse; }
.schwebe .dreieck { width: 16vmax; height: 16vmax;
  background: var(--lb-rosa); clip-path: polygon(50% 0, 100% 100%, 0 100%);
  top: 46%; left: 70%; animation-duration: calc(var(--lb-drift) * .8); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

main, nav, footer { position: relative; z-index: 1; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav { position: sticky; top: 1rem; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  max-width: 74rem; margin: 1rem auto 0; padding: .65rem 1.4rem;
  background: rgba(255,255,255,.75); backdrop-filter: blur(12px);
  border: 1px solid var(--lb-linie); border-radius: 999px;
  box-shadow: var(--lb-schatten); }
.marke { display: flex; align-items: center; gap: .6rem;
  font-weight: 700; letter-spacing: .01em; color: var(--lb-tinte);
  text-decoration: none; }
.signet { display: inline-flex; gap: .25rem; }
.signet i { width: .55em; height: .55em; display: block; }
.signet .k { background: var(--lb-koralle); border-radius: 50%; }
.signet .d { background: var(--lb-gruen); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.signet .q { background: var(--lb-blau); border-radius: 20%; }
.nav ul { display: flex; gap: 1.6rem; list-style: none; }
.nav a.link { color: var(--lb-tinte-soft); text-decoration: none; font-size: .92rem; font-weight: 500; position: relative; }
.nav a.link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -.3em;
  height: 2px; background: var(--lb-koralle); transition: right var(--lb-schnell) var(--lb-ease); }
.nav a.link:hover::after, .nav a.link.aktiv::after { right: 0; }

/* ============================================================
   LAYOUT
   ============================================================ */
.rahmen { max-width: 74rem; margin: 0 auto; padding: 0 clamp(1.2rem, 4vw, 2.5rem); }
.schmal { max-width: 46rem; }
.sektion { padding: clamp(4.5rem, 9vw, 8rem) 0; }

.display { font-family: var(--lb-font-display); font-weight: 300;
  line-height: var(--lb-lh-display); color: var(--lb-tinte); letter-spacing: -.01em; }
.display em { font-style: italic; color: var(--lb-koralle); }
.h1 { font-size: var(--lb-t-display); }
.h2 { font-size: var(--lb-t-h2); }
.h3 { font-size: var(--lb-t-h3); }
.mono { font-family: var(--lb-font-mono); font-size: var(--lb-t-label);
  letter-spacing: var(--lb-ls-label); text-transform: uppercase;
  color: var(--lb-tinte-faint); }
.mono b { color: var(--lb-koralle); font-weight: 500; }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding: clamp(5rem, 10vw, 8.5rem) 0 clamp(3rem, 6vw, 5rem); }
.hero .satz { max-width: 40ch; margin-top: 1.6rem; font-size: 1.12rem; }
.hero .h1 { max-width: 14ch; margin-top: 1.1rem; }

.laufband { overflow: hidden; border-block: 1px solid var(--lb-linie);
  padding: .8rem 0; margin-top: clamp(3rem, 6vw, 5rem); background: rgba(255,255,255,.5); }
.laufband .spur { display: inline-flex; gap: 3rem; white-space: nowrap;
  animation: lb-laufband 34s linear infinite; will-change: transform; }
.laufband span { font-family: var(--lb-font-mono); font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--lb-tinte-faint); }
.laufband b { color: var(--lb-koralle); font-weight: 500; }

/* ============================================================
   BILDER & PASSEPARTOUTS
   ============================================================ */
.passe { border-radius: var(--lb-radius); padding: clamp(.9rem, 2vw, 1.6rem); }
.passe.rosa { background: var(--lb-rosa); }
.passe.himmel { background: var(--lb-himmel); }
.passe.butter { background: var(--lb-butter); }
.passe.minze { background: var(--lb-minze); }
.passe.flieder { background: var(--lb-flieder); }
.bild { border-radius: var(--lb-radius-s); overflow: hidden; background: var(--lb-karte); }
.bild img { display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--lb-ruhig) var(--lb-ease); }
.passe:hover .bild img { transform: scale(1.025); }

/* ============================================================
   SERIEN-GRID (Startseite)
   ============================================================ */
.geschichten { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(1.2rem, 3vw, 2rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.gkarte { display: block; text-decoration: none; color: inherit;
  border-radius: var(--lb-radius); overflow: hidden; background: var(--lb-karte);
  box-shadow: var(--lb-schatten);
  transition: transform var(--lb-schnell) var(--lb-ease), box-shadow var(--lb-schnell) var(--lb-ease); }
.gkarte:hover { transform: translateY(-.5rem) rotate(.5deg); box-shadow: var(--lb-schatten-hoch); }
.gkarte:nth-child(even):hover { transform: translateY(-.5rem) rotate(-.5deg); }
.gkarte .bild { aspect-ratio: 3 / 2; border-radius: 0; }
.gkarte .inhalt { padding: 1.3rem 1.4rem 1.6rem; }
.gkarte h3 { font-family: var(--lb-font-display); font-size: 1.55rem; font-weight: 300;
  color: var(--lb-tinte); margin: .4rem 0 .5rem; }
.gkarte p { font-size: .95rem; }

/* ============================================================
   GALERIE (Serienseiten)
   ============================================================ */
.serie-kopf { padding: clamp(4rem, 8vw, 6.5rem) 0 clamp(2rem, 4vw, 3rem); }
.serie-kopf .satz { max-width: 56ch; margin-top: 1.6rem; }
.serie-kopf .satz p + p { margin-top: 1rem; }
.serie-kopf .h1 { max-width: 18ch; margin-top: 1.1rem; }

.galerie { display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(1.6rem, 4vw, 3rem); align-items: start;
  padding-bottom: clamp(3rem, 6vw, 5rem); }
.galerie figure { margin: 0; }
.galerie .voll { grid-column: 1 / -1; max-width: 60rem; justify-self: center; width: 100%; }
.galerie .passe { box-shadow: var(--lb-schatten);
  transition: transform var(--lb-schnell) var(--lb-ease), box-shadow var(--lb-schnell) var(--lb-ease); }
.galerie .passe:hover { transform: translateY(-.4rem) rotate(-.3deg); box-shadow: var(--lb-schatten-hoch); }
.galerie figcaption { margin-top: .7rem; }
.galerie .bild img { height: auto; }   /* natürliche Proportionen, kein Beschnitt */

/* Prev/Next am Seitenende */
.blaettern { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
  border-top: 1px solid var(--lb-linie); padding-top: 2.5rem; margin-top: 1rem; }
.blaettern a { text-decoration: none; color: inherit; border-radius: var(--lb-radius-s);
  padding: 1.1rem 1.3rem; background: var(--lb-karte); box-shadow: var(--lb-schatten);
  transition: transform var(--lb-schnell) var(--lb-ease), box-shadow var(--lb-schnell) var(--lb-ease); }
.blaettern a:hover { transform: translateY(-.3rem); box-shadow: var(--lb-schatten-hoch); }
.blaettern .weiter { text-align: right; grid-column: 2; }
.blaettern h4 { font-family: var(--lb-font-display); font-weight: 300;
  font-size: 1.3rem; color: var(--lb-tinte); margin-top: .3rem; }

/* ============================================================
   AUFTRAG
   ============================================================ */
.auftrag-band { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(.9rem, 2vw, 1.4rem); margin-top: clamp(2rem, 4vw, 3rem); }
.auftrag-band figure { margin: 0; }
.auftrag-band .passe { padding: .7rem; }
.auftrag-band .bild { aspect-ratio: 3 / 4; }
.auftrag-band .bild img { height: 100%; }
.auftrag-band figcaption { margin-top: .6rem; }

/* ============================================================
   KONTAKT / FOOTER
   ============================================================ */
.cta { display: inline-block; margin-top: 2rem; padding: .9em 1.8em;
  background: var(--lb-koralle); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 1.05rem; border-radius: 999px;
  box-shadow: var(--lb-schatten);
  transition: transform var(--lb-schnell) var(--lb-ease), box-shadow var(--lb-schnell) var(--lb-ease), background var(--lb-schnell); }
.cta:hover { transform: translateY(-.25rem) scale(1.02); box-shadow: var(--lb-schatten-hoch); background: var(--lb-blau); }
.meta { display: flex; gap: 1.8rem; flex-wrap: wrap; margin-top: 3.5rem; }
.meta a { color: inherit; }

/* Einschwimmen */
.flut { opacity: 0; translate: 0 1.6rem; scale: .985;
  transition: opacity var(--lb-ruhig) var(--lb-ease), translate var(--lb-ruhig) var(--lb-ease), scale var(--lb-ruhig) var(--lb-ease); }
.flut.da { opacity: 1; translate: 0 0; scale: 1; }
@media (prefers-reduced-motion: reduce) { .flut { opacity: 1; translate: none; scale: none; } }

/* ============================================================
   FLIESSTEXT / WORDPRESS-INHALTE
   Für Seiten (Impressum, Datenschutz) und Serien-Intros.
   ============================================================ */
.inhaltstext > * + * { margin-top: 1.1rem; }
.inhaltstext h2 { font-family: var(--lb-font-display); font-weight: 300;
  font-size: var(--lb-t-h2); color: var(--lb-tinte); line-height: var(--lb-lh-display);
  margin-top: 2.5rem; }
.inhaltstext h3 { font-family: var(--lb-font-display); font-weight: 300;
  font-size: var(--lb-t-h3); color: var(--lb-tinte); margin-top: 2rem; }
.inhaltstext a { color: var(--lb-blau); }
.inhaltstext ul, .inhaltstext ol { padding-left: 1.4rem; }
.inhaltstext blockquote { border-left: 3px solid var(--lb-koralle); padding-left: 1.2rem;
  font-family: var(--lb-font-display); font-size: var(--lb-t-h3); font-weight: 300;
  color: var(--lb-tinte); line-height: 1.35; }
.inhaltstext figure, .inhaltstext img { border-radius: var(--lb-radius-s); }
.inhaltstext figcaption { font-family: var(--lb-font-mono); font-size: var(--lb-t-label);
  letter-spacing: var(--lb-ls-label); color: var(--lb-tinte-faint); margin-top: .6rem; }
.alignwide  { max-width: 60rem; margin-inline: auto; }
.alignfull  { max-width: none; }
.aligncenter { margin-inline: auto; }

.hinweis { max-width: 46rem; padding: 1.6rem 1.8rem; background: var(--lb-karte);
  border-radius: var(--lb-radius); box-shadow: var(--lb-schatten);
  margin-top: clamp(2rem, 4vw, 3rem); }

.blaettern-seiten { display: flex; gap: 1.5rem; justify-content: space-between;
  border-top: 1px solid var(--lb-linie); padding-top: 2rem; margin-top: 3rem; }
.blaettern-seiten a { color: var(--lb-blau); text-decoration: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 820px) {
  .nav { flex-wrap: wrap; gap: .6rem; justify-content: center; border-radius: var(--lb-radius); }
  .nav ul { gap: 1rem; }
  .nav a.link { font-size: .82rem; }
  .geschichten { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: 1fr; }
  .auftrag-band { grid-template-columns: repeat(2, 1fr); }
  .blaettern { grid-template-columns: 1fr; }
  .blaettern .weiter { grid-column: 1; text-align: left; }
}

/* Admin-Bar darf die sticky Nav nicht überdecken */
.admin-bar .nav { top: calc(1rem + 32px); }
@media (max-width: 782px) { .admin-bar .nav { top: calc(1rem + 46px); } }