/* ==========================================================================
   Carmen Schäfer Fotografie — Stylesheet
   ========================================================================== */

/* ---------- Lokal eingebundene Schriften (kein Drittanbieter-Request) ---------- */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/playfair-display-normal-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/playfair-display-italic-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/poppins-normal-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-normal-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins-normal-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-normal-600.woff2') format('woff2');
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
input, textarea { font: inherit; color: inherit; }

/* ---------- Design tokens ---------- */
:root {
  /* Colors — Markenpalette (Logofarben: Dunkelblau, Beige, Hellblau; Hellgrau als Hintergrund statt Weiß) */
  --color-bg: #E5E9EC;
  --color-bg-alt: #FFFFFF;
  --color-dark: #333E48;
  --color-dark-soft: #525B63;
  --color-text: #333E48;
  --color-text-muted: #666E76;
  --color-text-on-dark: #EAF0F4;
  --color-text-on-dark-muted: #D5BA98;
  --color-accent: #3F6583;
  --color-accent-light: #A9C2D1;
  --color-border: #C1D2DC;
  --color-error: #B3432F;

  /* Typography */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --container-width: 1180px;
  --header-height: 84px;

  /* Effects */
  --transition: 0.3s ease;
  --shadow-soft: 0 10px 30px rgba(51, 62, 72, 0.08);
  --shadow-strong: 0 20px 50px rgba(51, 62, 72, 0.16);
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
  font-weight: 300;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-dark);
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: 24px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-dark);
  color: var(--color-text-on-dark);
  padding: 12px 20px;
  z-index: 1000;
}
.skip-link:focus { left: 0; }

section { position: relative; }

::selection { background: var(--color-accent); color: #fff; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 34px;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  white-space: nowrap;
}
.btn--primary {
  background: var(--color-dark);
  color: var(--color-text-on-dark);
}
.btn--primary:hover {
  background: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.btn--outline {
  background: transparent;
  color: var(--color-text-on-dark);
  border: 1px solid rgba(234, 240, 244, 0.6);
}
.btn--outline:hover {
  background: rgba(234, 240, 244, 0.12);
  border-color: var(--color-text-on-dark);
  transform: translateY(-2px);
}
.btn--small { padding: 10px 22px; font-size: 0.75rem; }
.btn--full { width: 100%; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---------- Section header ---------- */
.section__eyebrow {
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 500;
  margin-bottom: 14px;
}
.section__title {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  margin-bottom: 18px;
}
.section__title span { color: var(--color-accent); font-style: italic; }
.section__desc {
  color: var(--color-text-muted);
  max-width: 560px;
}
.section__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}
.section__header .section__desc { margin-inline: auto; }

/* ---------- Placeholder images ---------- */
.placeholder-img {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100px;
  background:
    linear-gradient(135deg, rgba(63,101,131,0.18), rgba(51,62,72,0.06)),
    repeating-linear-gradient(45deg, rgba(51,62,72,0.035) 0 2px, transparent 2px 14px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.placeholder-img::before {
  content: "";
  width: 44px;
  height: 44px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F6583' stroke-width='1.3'%3E%3Crect x='3' y='6' width='18' height='13' rx='2'/%3E%3Ccircle cx='12' cy='12.5' r='3.5'/%3E%3Cpath d='M8 6l1.5-2h5L16 6'/%3E%3C/svg%3E");
  opacity: 0.55;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 14px));
}
.placeholder-img::after {
  content: attr(data-label);
  position: absolute;
  bottom: 14px;
  left: 12px;
  right: 12px;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding-block: 22px;
  transition: background var(--transition), padding var(--transition), box-shadow var(--transition);
}
.header.scrolled, .header--solid {
  background: rgba(229, 233, 236, 0.92);
  backdrop-filter: blur(10px);
  padding-block: 12px;
  box-shadow: var(--shadow-soft);
}
.header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo { display: block; line-height: 0; transition: opacity var(--transition), visibility var(--transition); }
.logo__img { display: block; width: auto; height: 46px; }
/* Startseite ganz oben: das große Logo steht im Startbild – das kleine erscheint erst beim Scrollen */
.header:not(.scrolled):not(.header--solid) .logo { opacity: 0; visibility: hidden; }

.nav__list { display: flex; gap: 36px; }
.nav__link {
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--color-text-on-dark);
  position: relative;
  padding-bottom: 4px;
  transition: color var(--transition);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0;
  height: 1px;
  background: var(--color-accent);
  transition: width var(--transition);
}
.nav__link:hover, .nav__link.active { color: var(--color-accent-light); }
.nav__link:hover::after, .nav__link.active::after { width: 100%; }
.header.scrolled .nav__link, .header--solid .nav__link { color: var(--color-text); }
.header.scrolled .nav__link:hover, .header.scrolled .nav__link.active,
.header--solid .nav__link:hover, .header--solid .nav__link.active { color: var(--color-accent); }

.nav__cta { flex-shrink: 0; }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 32px;
  padding: 4px;
  position: relative;
  z-index: 101;
}
.nav__toggle span {
  height: 2px;
  background: var(--color-text-on-dark);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition), background var(--transition);
}
.header.scrolled .nav__toggle span, .header--solid .nav__toggle span { background: var(--color-text); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  height: 100vh;
  min-height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; overflow: hidden; }
.hero__slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: var(--color-dark);
  opacity: 0;
  transition: opacity 1.5s ease;
}
/* Unscharfer Hintergrund aus demselben Bild füllt die Ränder, wenn ein Hochformat-Foto
   nicht die ganze breite Hero-Fläche ausfüllt – größer skaliert, damit der weichgezeichnete
   Rand nicht am Elementrand durchscheint, von .hero__slide { overflow: hidden } abgeschnitten */
.hero__slide::before {
  content: "";
  position: absolute;
  inset: -40px;
  background-image: var(--slide-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(36px) brightness(0.75);
  transform: scale(1.1);
}
/* Scharfes Bild obendrauf, immer komplett sichtbar statt zugeschnitten */
.hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--slide-img);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.hero__slide.is-active {
  opacity: 1;
  animation: heroSlideZoom 6s ease-out forwards;
}
@keyframes heroSlideZoom {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; animation: none !important; }
  .lightbox { transition: none; }
  .portfolio__tile img, .portfolio__slideshow, .portfolio__slideshow img { transition: none; }
  .form__note.is-success, .form__note.is-error { animation: none; }
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(51,62,72,0.68) 0%, rgba(51,62,72,0.60) 50%, rgba(51,62,72,0.82) 100%);
}
.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--color-text-on-dark);
  padding-inline: 24px;
  max-width: 780px;
}
.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.78rem;
  color: var(--color-accent-light);
  margin-bottom: 22px;
}
.hero__title {
  font-size: clamp(2.4rem, 6.5vw, 4.6rem);
  color: var(--color-text-on-dark);
  margin-bottom: 20px;
}
.hero__logo {
  display: block;
  width: min(560px, 80vw);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 2px 14px rgba(20, 26, 32, 0.45)); /* hebt das Logo von jedem Foto ab */
}
/* Platzhalter-Kamerasymbol im Startbild würde hinter dem Logo durchscheinen */
.hero__slide.placeholder-img::before { display: none; }
.hero__subtitle {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 300;
  color: var(--color-text-on-dark-muted);
  margin-bottom: 40px;
}

.hero__scroll {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 26px;
  height: 42px;
  border: 1px solid rgba(234, 240, 244, 0.6);
  border-radius: 20px;
}
.hero__scroll span {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--color-text-on-dark);
  animation: scrollDot 1.8s ease infinite;
}
@keyframes scrollDot {
  0% { opacity: 1; transform: translateY(0); }
  70% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 0; transform: translateY(0); }
}

/* ==========================================================================
   About
   ========================================================================== */
.about { padding-block: 130px; }
.about__container {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 80px;
  align-items: center;
}
.about__image { border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-strong); }
.about__image img { display: block; width: 100%; height: auto; }
.about__text { color: var(--color-text-muted); margin-bottom: 20px; max-width: 520px; }

.about__stats {
  display: flex;
  gap: 40px;
  margin: 36px 0 40px;
  flex-wrap: wrap;
}
.stat { display: flex; flex-direction: column; }
.stat__number {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  color: var(--color-accent);
  font-weight: 700;
}
.stat__label {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   Portfolio
   ========================================================================== */
.portfolio { padding-block: 130px; background: var(--color-bg-alt); }

.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 28px;
}
.portfolio__item {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 18px; /* Platz für die angedeuteten Albumseiten dahinter */
  text-align: left;
}
.portfolio__item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 6px; border-radius: 4px; }

/* Album: wechselnde Bildersammlung eines Shootings, dahinter zwei angedeutete Seiten */
.portfolio__album {
  position: relative;
  display: block;
  isolation: isolate;
}
.portfolio__album::before,
.portfolio__album::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(51, 62, 72, 0.08);
  transition: transform 0.5s ease;
}
.portfolio__album::before { transform: translateY(-8px) scaleX(0.95); }
.portfolio__album::after { transform: translateY(-16px) scaleX(0.89); background: var(--color-bg); z-index: -2; }
.portfolio__item:hover .portfolio__album::before { transform: translateY(-11px) scaleX(0.95) rotate(-1.2deg); }
.portfolio__item:hover .portfolio__album::after { transform: translateY(-21px) scaleX(0.89) rotate(1.8deg); }

/* Leicht verdrehte Alben brechen das strenge Raster */
.portfolio__item:nth-child(3n + 1) .portfolio__album { transform: rotate(-0.7deg); }
.portfolio__item:nth-child(3n + 2) .portfolio__album { transform: rotate(0.5deg); }
.portfolio__item:nth-child(3n) .portfolio__album { transform: rotate(-0.3deg); }

/* Albumseite, auf der die Fotos wie Abzüge schräg und leicht versetzt liegen */
.portfolio__collage {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: #F7F9FA;
  border-radius: 3px;
  box-shadow: var(--shadow-soft);
  transition: box-shadow var(--transition);
}
.portfolio__item:hover .portfolio__collage { box-shadow: var(--shadow-strong); }
.portfolio__tile {
  position: absolute;
  display: block;
  overflow: hidden;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 3px 10px rgba(51, 62, 72, 0.16);
  transform: rotate(var(--tilt, 0deg));
}
.portfolio__tile:nth-child(1) { left: 5%; top: 6%; width: 52%; height: 47%; --tilt: -3deg; z-index: 1; }
.portfolio__tile:nth-child(2) { left: 55%; top: 4%; width: 40%; height: 45%; --tilt: 2.5deg; z-index: 2; }
.portfolio__tile:nth-child(3) { left: 7%; top: 52%; width: 41%; height: 42%; --tilt: 2deg; z-index: 3; }
.portfolio__tile:nth-child(4) { left: 44%; top: 47%; width: 51%; height: 47%; --tilt: -2deg; z-index: 2; }
/* Jedes zweite Album gespiegelt angeordnet */
.portfolio__item:nth-child(even) .portfolio__tile:nth-child(1) { left: 43%; --tilt: 2.5deg; }
.portfolio__item:nth-child(even) .portfolio__tile:nth-child(2) { left: 5%; --tilt: -2deg; }
.portfolio__item:nth-child(even) .portfolio__tile:nth-child(3) { left: 52%; --tilt: -1.5deg; }
.portfolio__item:nth-child(even) .portfolio__tile:nth-child(4) { left: 5%; --tilt: 2.5deg; }
/* Alben mit drei Bildern: ein großes Hochformat, zwei kleinere daneben */
.portfolio__item .portfolio__collage--3 .portfolio__tile:nth-child(1) { left: 6%; top: 7%; width: 55%; height: 84%; --tilt: -2deg; }
.portfolio__item .portfolio__collage--3 .portfolio__tile:nth-child(2) { left: 58%; top: 6%; width: 37%; height: 42%; --tilt: 3deg; }
.portfolio__item .portfolio__collage--3 .portfolio__tile:nth-child(3) { left: 56%; top: 50%; width: 38%; height: 43%; --tilt: -1.5deg; }
.portfolio__tile.placeholder-img { position: absolute; min-height: 0; }
.portfolio__tile.placeholder-img:not(:first-child)::before { width: 26px; height: 26px; transform: translate(-50%, -50%); }

/* Zwei übereinanderliegende Bilder pro Kachel: das neue wird über dem alten eingeblendet,
   das alte verschwindet erst danach – so wird die Kachel beim Wechsel nie blass */
.portfolio__tile img,
.portfolio__slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  opacity: 0;
  transition: opacity 1.4s ease 1.4s;
}
.portfolio__tile img { inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); } /* weißer Rand wie bei einem Abzug */
.portfolio__tile img.is-front,
.portfolio__slideshow img.is-front { opacity: 1; z-index: 1; transition-delay: 0s; }

/* Diashow beim Hovern: liegt über der Sammlung und füllt das ganze Album */
.portfolio__slideshow {
  position: absolute;
  inset: 4%;
  z-index: 5;
  overflow: hidden;
  border-radius: 2px;
  background: var(--color-dark-soft);
  box-shadow: 0 4px 14px rgba(51, 62, 72, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.portfolio__slideshow.is-active { opacity: 1; }

/* ==========================================================================
   Services
   ========================================================================== */
.services { padding-block: 130px; }
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.service__card {
  padding: 44px 32px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.service__card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
  border-color: transparent;
}
.service__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-accent);
  margin-bottom: 24px;
}
.service__icon svg { width: 26px; height: 26px; }
.service__card h3 { font-size: 1.25rem; margin-bottom: 12px; }
.service__card p { color: var(--color-text-muted); font-size: 0.95rem; }

/* ==========================================================================
   Aktuelles (Aktionsflyer)
   ========================================================================== */
.flyers { padding-block: 130px; background: var(--color-bg-alt); }
.flyers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
  justify-content: center;
  gap: 30px;
}
.flyer__card {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-bg);
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition), box-shadow var(--transition);
}
.flyer__card:hover { transform: translateY(-6px); box-shadow: var(--shadow-strong); }
.flyer__card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.flyer__card img { width: 100%; height: 100%; object-fit: contain; }

/* Ab 3 gleichzeitigen Flyern: horizontale Scroll-Leiste statt Grid */
.flyers__grid--scroll {
  display: flex;
  justify-content: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent) transparent;
}
.flyers__grid--scroll .flyer__card {
  flex: 0 0 260px;
  scroll-snap-align: start;
}
.flyers__grid--scroll::-webkit-scrollbar { height: 8px; }
.flyers__grid--scroll::-webkit-scrollbar-track { background: transparent; }
.flyers__grid--scroll::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: 4px; }

.flyers__note { text-align: center; margin-top: 44px; color: var(--color-text-muted); }
.flyers__note a { color: var(--color-accent); border-bottom: 1px solid var(--color-accent); }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact { padding-block: 130px; }
.contact__container {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 80px;
}
.contact__list { margin: 30px 0; display: flex; flex-direction: column; gap: 18px; }
.contact__list li { display: flex; align-items: center; gap: 14px; color: var(--color-text-muted); }
.contact__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-accent);
}
.contact__icon svg { width: 18px; height: 18px; }

.social-links { display: flex; gap: 14px; }
.social-links a {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  transition: all var(--transition);
}
.social-links a:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; transform: translateY(-3px); }
.social-links svg { width: 18px; height: 18px; }

/* Form */
.contact__form { background: var(--color-bg-alt); padding: 44px; border-radius: 8px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form__group { position: relative; margin-bottom: 22px; }
.form__group input,
.form__group textarea {
  width: 100%;
  padding: 16px 4px 10px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  outline: none;
  transition: border-color var(--transition);
  resize: vertical;
}
.form__group input:focus,
.form__group textarea:focus { border-color: var(--color-accent); }
.form__group label {
  position: absolute;
  left: 4px;
  top: 16px;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  pointer-events: none;
  transition: all var(--transition);
}
.form__group input:focus + label,
.form__group input:not(:placeholder-shown) + label,
.form__group textarea:focus + label,
.form__group textarea:not(:placeholder-shown) + label {
  top: -6px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.form__note { font-size: 0.85rem; color: var(--color-accent); }
/* Deutlich sichtbare Rückmeldung statt unauffälliger Kleinschrift, damit beim Absenden
   nicht unbemerkt bleibt, ob die Nachricht angekommen ist */
.form__note.is-success,
.form__note.is-error {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #fff;
  animation: formNoteIn 0.4s ease;
}
.form__note.is-success { background: var(--color-accent); }
.form__note.is-error { background: var(--color-error); }
.form__note.is-success::before,
.form__note.is-error::before {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}
.form__note.is-success::before { content: "\2713"; }
.form__note.is-error::before { content: "!"; }
@keyframes formNoteIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Spam-Falle: für Menschen unsichtbar, Bots füllen das Feld trotzdem aus */
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 22px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.form__consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: var(--color-accent);
}
.form__consent a { color: var(--color-accent); border-bottom: 1px solid var(--color-accent); }

/* ==========================================================================
   Legal (Impressum / Datenschutz)
   ========================================================================== */
.legal { padding-block: 130px; }
.legal__container { max-width: 760px; }
.legal h1 { font-size: clamp(2rem, 4vw, 2.6rem); margin-bottom: 12px; }
.legal__updated { color: var(--color-text-muted); font-size: 0.85rem; margin-bottom: 48px; }
.legal h2 { font-size: 1.25rem; margin: 40px 0 14px; }
.legal p, .legal li { color: var(--color-text-muted); margin-bottom: 14px; }
.legal ul { padding-left: 20px; list-style: disc; margin-bottom: 14px; }
.legal li { margin-bottom: 8px; }
.legal strong { color: var(--color-text); }
.legal a { color: var(--color-accent); border-bottom: 1px solid var(--color-accent); }
.legal__todo {
  background: rgba(63, 101, 131, 0.15);
  color: var(--color-accent);
  font-style: italic;
  padding: 2px 6px;
  border-radius: 3px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--color-dark); padding-block: 40px; }
.footer .logo__img { height: 40px; }
.footer__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.footer__copy { color: var(--color-text-on-dark-muted); font-size: 0.85rem; }
.footer__links { display: flex; gap: 20px; }
.footer__links a { color: var(--color-text-on-dark-muted); font-size: 0.85rem; transition: color var(--transition); }
.footer__links a:hover { color: var(--color-accent-light); }
.footer__top {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(234,240,244,0.2);
  color: var(--color-text-on-dark);
  transition: all var(--transition);
}
.footer__top:hover { background: var(--color-accent); border-color: var(--color-accent); }

/* ==========================================================================
   Lightbox (Portfolio-Bildsets)
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(51, 62, 72, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition);
  touch-action: none; /* verhindert, dass die Wisch-Geste als Scroll an die Seite dahinter durchgereicht wird */
}
.lightbox.is-open { opacity: 1; visibility: visible; }

/* Verhindert zusätzlich, dass die Seite im Hintergrund scrollt/wackelt, während die Lightbox offen ist */
body.lightbox-open { overflow: hidden; }

.lightbox__stage {
  width: min(90vw, 640px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.lightbox__image {
  position: relative;
  max-width: 100%;
  max-height: 80vh;
  min-height: 100px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-strong);
  background: var(--color-dark-soft);
}
.lightbox__image-el {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
}
.lightbox__image.placeholder-img .lightbox__image-el { display: none; }
.lightbox__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.lightbox__counter {
  color: var(--color-text-on-dark-muted);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.lightbox__close {
  position: fixed;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(234, 240, 244, 0.3);
  color: var(--color-text-on-dark);
  font-size: 1.8rem;
  line-height: 1;
  transition: background var(--transition), border-color var(--transition);
}
.lightbox__close:hover { background: rgba(234, 240, 244, 0.12); border-color: var(--color-text-on-dark); }

.lightbox__nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(234, 240, 244, 0.3);
  color: var(--color-text-on-dark);
  font-size: 2rem;
  line-height: 1;
  transition: background var(--transition), border-color var(--transition);
}
.lightbox__nav:hover { background: rgba(234, 240, 244, 0.12); border-color: var(--color-text-on-dark); }
.lightbox__nav--prev { left: 24px; }
.lightbox__nav--next { right: 24px; }

@media (max-width: 860px) {
  /* Die Pfeile standen bisher fest an den Bildschirmrändern; seit Bilder ihr eigenes
     Seitenverhältnis behalten (nicht mehr zugeschnitten werden), kann ein breites Foto auf
     schmaler Fläche fast bis an den Rand reichen und lag dann darunter. Auf schmaler Fläche
     deshalb stattdessen normal in der Reihe neben dem Zähler statt fest positioniert -
     dadurch unabhängig von der jeweiligen Bildbreite nie mehr überlappend. Zusätzlich bleibt
     die Wisch-Geste verfügbar (siehe js/main.js).
     Die Reihe selbst steht fest am unteren Bildschirmrand (statt nur im normalen Textfluss
     unter dem Bild), damit sie beim Wechsel zwischen Hoch- und Querformat-Bildern nicht je
     nach Bildhöhe springt - die Bildhöhe ist dafür extra begrenzt, damit nie etwas überlappt. */
  .lightbox__controls { position: fixed; left: 0; right: 0; bottom: 20px; z-index: 2; }
  .lightbox__image, .lightbox__image-el { max-height: min(70vh, calc(100vh - 170px)); }
  .lightbox__nav { position: static; transform: none; width: 44px; height: 44px; font-size: 1.6rem; }
}

@media (max-width: 640px) {
  .lightbox__stage { width: min(88vw, 640px); }
  .lightbox__close { top: 14px; right: 14px; width: 40px; height: 40px; font-size: 1.5rem; }
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 992px) {
  .about__container,
  .contact__container { grid-template-columns: 1fr; gap: 50px; }
  .about__image { max-width: 420px; margin-inline: auto; }
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .nav { position: fixed; inset: 0 0 0 auto; width: min(78vw, 340px); height: 100vh; background: var(--color-dark); padding: 110px 36px; transform: translateX(100%); transition: transform var(--transition); z-index: 90; }
  .nav.open { transform: translateX(0); box-shadow: var(--shadow-strong); }
  .nav__list { flex-direction: column; gap: 26px; }
  /* Mit #nav statt .nav gezielt stärker gewichtet als .header.scrolled/.header--solid .nav__link
     weiter oben – die Ausklapp-Fläche ist immer dunkel, unabhängig vom Header-Zustand, die
     Linkfarbe darf sich hier also nie an den (für den schmalen Header gedachten) Scroll-Zustand anpassen */
  #nav .nav__link { color: var(--color-text-on-dark); font-size: 1rem; }
  #nav .nav__link:hover, #nav .nav__link.active { color: var(--color-accent-light); }
  .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .nav__toggle span { background: var(--color-text-on-dark); }
  .header.scrolled .nav__toggle span, .header--solid .nav__toggle span { background: var(--color-text); }
}

@media (max-width: 640px) {
  .header .logo__img { height: 38px; }
  :root { --header-height: 72px; }
  .about, .portfolio, .services, .contact { padding-block: 84px; }
  .services__grid,
  .portfolio__grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; gap: 0; }
  .contact__form { padding: 28px; }
  .footer__container { flex-direction: column; text-align: center; }
}