/* Lokal eingebundene Schriften (kein externer Aufruf an Google Fonts) */
  @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/barlow-300-normal.woff2') format('woff2'); }
  @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/barlow-400-normal.woff2') format('woff2'); }
  @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/barlow-500-normal.woff2') format('woff2'); }
  @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/barlow-600-normal.woff2') format('woff2'); }
  @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/barlow-condensed-400-normal.woff2') format('woff2'); }
  @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/barlow-condensed-500-normal.woff2') format('woff2'); }
  @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/barlow-condensed-600-normal.woff2') format('woff2'); }
  @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/barlow-condensed-700-normal.woff2') format('woff2'); }
  @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/cormorant-garamond-300-normal.woff2') format('woff2'); }
  @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/cormorant-garamond-300-normal.woff2') format('woff2'); }
  @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/cormorant-garamond-300-normal.woff2') format('woff2'); }
  @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/cormorant-garamond-300-italic.woff2') format('woff2'); }
  @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/cormorant-garamond-300-italic.woff2') format('woff2'); }

  :root {
    --gold: #CF9D7B;
    --gold-light: #E3BE9E;
    --dark: #17302B;
    --dark2: #1C3A33;
    --dark3: #21453D;
    --white: #FFFCF6;
    --gray: #B7B7B6;
    --cream: #FFFCF6;
    --cream2: #F7EFE4;
    --cream3: #F0E4D3;
    --charcoal: #3A3534;
    --brown: #724B39;
  }

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

  img, video {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
  body {
    background: var(--dark);
    color: var(--white);
    font-family: 'Barlow', sans-serif;
    font-weight: 300;
    overflow-x: hidden;
    cursor: none;
  }

  .cursor {
    position: fixed; top: 0; left: 0; width: 8px; height: 8px;
    background: var(--gold); border-radius: 50%;
    pointer-events: none; z-index: 9999;
    transform: translate(-50%, -50%);
    will-change: transform; /* 14.09.2026: Position per transform (Skript), kein Übergang mehr, sonst hinkt der Punkt */
  }
  .cursor-ring {
    position: fixed; top: 0; left: 0; width: 36px; height: 36px;
    border: 1px solid var(--gold); border-radius: 50%;
    pointer-events: none; z-index: 9998;
    transition: width 0.2s, height 0.2s, opacity 0.2s;
    transform: translate(-50%, -50%); opacity: 0.5;
    will-change: transform;
  }

  /* NAV */
  nav {
    position: fixed; top: 0; width: 100%; z-index: 100;
    padding: 24px 60px;
    display: flex; align-items: center; gap: 48px;
    transition: background 0.4s, padding 0.4s, transform 0.3s ease;
  }
  nav.scrolled {
    background: rgba(23,48,43,0.95);
    backdrop-filter: blur(12px);
    padding: 16px 60px;
    border-bottom: 1px solid rgba(207,157,123,0.15);
  }
  nav.nav-hidden { transform: translateY(-100%); }
  .nav-logo {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem; font-weight: 600;
    letter-spacing: 0.08em; color: var(--white); text-decoration: none;
  }
  .nav-logo span { color: var(--gold); }
  .nav-logo img { height: 1.6rem; width: auto; display: block; }
  .nav-links { display: flex; gap: 40px; list-style: none; align-items: center; margin-left: auto; }
  .nav-links a {
    text-decoration: none; color: rgba(245,242,238,0.7);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.78rem; letter-spacing: 0.15em; text-transform: uppercase;
    transition: color 0.3s;
  }
  .nav-links a:hover { color: var(--gold); }
  .nav-icons { display: flex; gap: 20px; align-items: center; }
  .nav-icon { color: rgba(245,242,238,0.6); transition: color 0.3s; cursor: pointer; }
  .nav-icon:hover { color: var(--gold); }
  .nav-icon-link { display: flex; text-decoration: none; }

  /* NAV: mobile hamburger + fullscreen menu (hidden on desktop) */
  .nav-toggle {
    display: none;
    flex-direction: column; justify-content: center; align-items: flex-end; gap: 5px;
    width: 44px; height: 44px;
    background: none; border: none; padding: 0; cursor: pointer;
    z-index: 200; position: relative;
  }
  .nav-toggle span {
    display: block; width: 24px; height: 2px; background: var(--gold);
    transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
  }
  .nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); width: 24px; }
  .nav-toggle.active span:nth-child(2) { opacity: 0; }
  .nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); width: 24px; }

  .nav-mobile-menu {
    display: none;
  }

  @media (max-width: 768px) {
    .nav-links, .nav-icons { display: none; }
    .nav-toggle { display: flex; margin-left: auto; }
    nav, nav.scrolled { padding: 16px 20px; }

    .nav-mobile-menu {
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px;
      position: fixed; inset: 0; z-index: 150;
      background: var(--dark);
      opacity: 0; visibility: hidden; transform: translateY(-16px);
      transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
      padding: 24px;
    }
    .nav-mobile-menu.active { opacity: 1; visibility: visible; transform: translateY(0); }
    .nav-mobile-close {
      position: absolute; top: 20px; right: 16px;
      width: 44px; height: 44px;
      background: none; border: none; color: var(--gold);
      font-size: 2rem; line-height: 1; cursor: pointer;
    }
    .nav-mobile-links { list-style: none; text-align: center; display: flex; flex-direction: column; gap: 22px; }
    .nav-mobile-links a {
      text-decoration: none; color: var(--white);
      font-family: 'Cormorant Garamond', serif; font-weight: 300;
      font-size: clamp(1.4rem, 6vw, 1.9rem); letter-spacing: 0.01em;
      transition: color 0.3s;
    }
    .nav-mobile-links a:hover, .nav-mobile-links a:active { color: var(--gold); }
    .nav-mobile-icons { display: flex; gap: 28px; margin-top: 8px; }
    .nav-mobile-icons .nav-icon-link { color: rgba(245,242,238,0.7); padding: 10px; }
    .nav-mobile-icons .nav-icon-link:hover { color: var(--gold); }
  }

  /* HERO */
  .hero {
    height: 100vh; position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
  }
  /* Homepage-only: height matches the video's real aspect ratio (1920x1080 = 16:9), so it is never cropped */
  .hero.hero-compact { height: auto; aspect-ratio: 16 / 9; max-height: 100vh; margin: 0 auto; padding: 110px 60px 40px; background: var(--dark); }
  /* Impressum/Datenschutz-only: compact header, no full-viewport height */
  .hero.hero-legal { height: auto; padding: 150px 60px 50px; }
  .hero-bg {
    position: absolute; inset: 0; overflow: hidden;
  }
  .hero-bg img {
    width: 100%; height: 100%; object-fit: cover; object-position: center top;
    filter: brightness(0.45);
  }
  .hero-bg video {
    width: 100%; height: 100%; object-fit: cover; object-position: center;
    filter: brightness(0.45);
  }
  .hero-bg::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(23,48,43,0.92) 0%, rgba(23,48,43,0.3) 50%, rgba(23,48,43,0.15) 100%);
  }
  /* Homepage-only: flat dark-green overlay over the hero video for text legibility */
  .hero.hero-compact .hero-bg::after {
    background: rgba(23,48,43,0.3);
  }

  .hero-content {
    position: relative; padding: 0 24px; max-width: 760px; margin: 0 auto;
    animation: fadeUp 1.2s ease forwards; opacity: 0; animation-delay: 0.3s;
  }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .hero-eyebrow {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 14px;
    display: flex; align-items: center; justify-content: center; gap: 16px;
  }
  .hero-eyebrow::before { content: ''; width: 40px; height: 1px; background: var(--gold); }
  .hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.9rem, 4vw, 3.4rem);
    font-weight: 300; line-height: 1.15; margin-bottom: 18px;
  }
  .hero-title em { font-style: italic; color: var(--gold); }
  .hero-subtitle {
    font-size: 0.95rem; color: rgba(245,242,238,0.55);
    margin: 0 auto 28px; font-weight: 300; line-height: 1.5; max-width: 480px;
  }
  .hero-cta {
    display: inline-flex; align-items: center; gap: 14px;
    padding: 14px 32px; border: 1px solid var(--gold);
    color: var(--white); text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
    transition: background 0.3s, color 0.3s; position: relative; overflow: hidden;
  }
  .hero-cta::before {
    content: ''; position: absolute; inset: 0;
    background: var(--gold); transform: scaleX(0);
    transform-origin: left; transition: transform 0.35s ease; z-index: -1;
  }
  .hero-cta:hover::before { transform: scaleX(1); }
  .hero-cta:hover { color: var(--dark); }

  .hero-scroll {
    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    color: rgba(245,242,238,0.3);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.6rem; letter-spacing: 0.25em; text-transform: uppercase;
    animation: fadeUp 1.5s ease 1.5s forwards; opacity: 0;
  }
  .scroll-line {
    width: 1px; height: 50px;
    background: linear-gradient(180deg, var(--gold) 0%, transparent 100%);
    animation: scrollAnim 1.8s ease infinite;
  }
  @keyframes scrollAnim {
    0%   { transform: scaleY(0); transform-origin: top; }
    50%  { transform: scaleY(1); transform-origin: top; }
    51%  { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
  }

  /* SECTION */
  section { padding: 120px 60px; }
  .section-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--gold); display: flex; align-items: center; gap: 16px; margin-bottom: 24px;
  }
  .section-label::after { content: ''; width: 40px; height: 1px; background: var(--gold); }
  h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 300; line-height: 1.1; }
  h2 em { font-style: italic; color: var(--gold); }

  /* SERVICES */
  .services { background: var(--dark2); }
  .services-intro {
    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 80px; align-items: center;
  }
  .services-intro p { font-size: 1rem; line-height: 1.8; color: rgba(245,242,238,0.6); }
  .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
  .service-card {
    background: var(--dark3); padding: 48px 36px;
    position: relative; overflow: hidden; cursor: pointer; transition: background 0.4s;
    display: flex; flex-direction: column;
  }
  .service-card-info { min-height: 215px; }
  .service-card .btn-ghost { margin-top: auto; }
  .service-card::before {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 100%; height: 2px; background: var(--gold);
    transform: scaleX(0); transition: transform 0.4s ease;
  }
  .service-card:hover { background: #2A5147; }
  .service-card:hover::before { transform: scaleX(1); }

  /* Service card with image */
  .service-card-img {
    height: 200px; overflow: hidden; margin: -48px -36px 32px; position: relative;
  }
  .service-card-img img {
    width: 100%; height: 100%; object-fit: cover;
    filter: brightness(0.7); transition: transform 0.6s ease, filter 0.4s;
  }
  .service-card:hover .service-card-img img { transform: scale(1.04); filter: brightness(0.85); }

  .service-num {
    font-family: 'Cormorant Garamond', serif; font-size: 3.5rem; font-weight: 300;
    color: rgba(207,157,123,0.12); line-height: 1; margin-bottom: 20px;
  }
  .service-card h3 {
    font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; color: var(--white);
  }
  .service-card p { font-size: 0.88rem; color: rgba(245,242,238,0.5); line-height: 1.7; margin-bottom: 28px; }
  .service-items { list-style: none; margin-bottom: 32px; }
  .service-card-wide-text { flex: 1 1 320px; }
  .service-card-wide-img {
    flex: 0 0 380px;
    margin: -48px -36px -48px 0;
    overflow: hidden;
    position: relative;
  }
  .service-card-wide-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .service-items li {
    font-size: 0.82rem; color: rgba(245,242,238,0.45);
    padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex; align-items: center; gap: 10px;
  }
  .service-items li::before { content: '—'; color: var(--gold); font-size: 0.7rem; }
  .btn-ghost {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'Barlow Condensed', sans-serif; font-size: 0.75rem;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
    text-decoration: none; border-bottom: 1px solid rgba(207,157,123,0.3);
    padding-bottom: 4px; transition: border-color 0.3s;
  }
  .btn-ghost:hover { border-color: var(--gold); }

  /* REEL / PORTFOLIO */

  .reel-label {
    text-align: center; padding: 80px 60px 40px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase;
    color: rgba(207,157,123,0.5);
  }

  /* Main video */
  .main-video-wrap {
    margin: 0 60px; position: relative; background: var(--dark3);
    overflow: hidden;
  }
  .main-video-wrap video {
    width: 100%; display: block; max-height: 520px; object-fit: cover;
  }
  .video-overlay {
    position: absolute; inset: 0; display: flex;
    align-items: center; justify-content: center;
    background: rgba(0,0,0,0.3);
    transition: opacity 0.3s;
  }
  .video-overlay.hidden { opacity: 0; pointer-events: none; }
  .video-play-btn {
    width: 80px; height: 80px; border: 1.5px solid var(--gold); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.3s, transform 0.3s;
    background: rgba(0,0,0,0.3);
  }
  .video-play-btn:hover { background: rgba(207,157,123,0.2); transform: scale(1.08); }

  /* Video grid */
  .video-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
    margin: 2px 60px 0;
  }
  .video-thumb-wrap {
    position: relative; overflow: hidden; cursor: pointer;
    background: var(--dark3); aspect-ratio: 16/9;
  }
  .video-thumb-wrap video {
    width: 100%; height: 100%; object-fit: cover;
    filter: brightness(0.65); transition: filter 0.4s;
    pointer-events: none;
  }
  .video-thumb-wrap:hover video { filter: brightness(0.9); }
  .video-thumb-overlay {
    position: absolute; inset: 0; display: flex;
    flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    transition: opacity 0.3s;
  }
  .video-thumb-overlay.hidden { opacity: 0; }
  .video-thumb-play {
    width: 48px; height: 48px; border: 1px solid var(--gold); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.4);
  }
  .video-thumb-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(245,242,238,0.5);
  }

  /* PORTFOLIO PLACEHOLDER */
  .portfolio-empty { padding: 48px 60px 56px; text-align: center; }
  .portfolio-empty h2 { font-size: clamp(1.6rem, 3.2vw, 2.6rem); margin-bottom: 20px; }
  .portfolio-frame {
    max-width: 900px; margin: 0 auto; aspect-ratio: 16/9;
    border: 1px dashed rgba(207,157,123,0.35);
    display: flex; align-items: center; justify-content: center;
    color: rgba(207,157,123,0.45);
    background: rgba(255,255,255,0.02);
  }

  /* PORTFOLIO GALLERY (homepage only) — gapless 7-tile filmstrip, video as center tile */
  .portfolio-gallery {
    position: relative;
    width: 100%; max-width: 1100px; margin: 0 auto;
  }
  .portfolio-mosaic {
    position: relative;
    width: 100%;
    -webkit-touch-callout: none; user-select: none;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
  }
  .portfolio-mosaic-item { aspect-ratio: 2 / 3; overflow: hidden; background: var(--dark3); }
  .portfolio-mosaic-item img,
  .portfolio-mosaic-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .portfolio-mosaic-video video { object-position: center 25%; }
  .portfolio-gallery-overlay {
    position: absolute; inset: 0; z-index: 2;
    background: rgba(23,48,43,0.12); pointer-events: none;
  }
  .portfolio-gallery + .btn-primary { margin-top: 20px; }
  /* Mobil/Tablet (Vorgabe Valentin 14.09.2026): dieselbe 7-Kachel-Aufteilung wie am PC, nur verkleinert;
     der Streifen steht wie das Hero-Video bündig mit den Seitenrändern (20 px, ab 480 px 16 px). */
  @media (max-width: 1024px) {
    .portfolio-mosaic { grid-template-columns: repeat(7, 1fr); }
  }
  @media (max-width: 768px) {
    .portfolio-empty { padding: 40px 20px 48px; }
  }
  @media (max-width: 480px) {
    .portfolio-empty { padding-left: 16px; padding-right: 16px; }
  }

  /* PORTFOLIO-SEITE: KATEGORIE-SEKTIONEN MIT GEMISCHTEM MOSAIK */
  .portfolio-category { padding: 90px 0; }
  .portfolio-category .section-label, .portfolio-category h2 { padding: 0 60px; }
  .portfolio-category.theme-dark { background: var(--dark2); }
  .portfolio-category.theme-cream { background: var(--cream); }
  .portfolio-category.theme-cream .section-label { color: var(--brown); }
  .portfolio-category.theme-cream .section-label::after { background: var(--brown); }
  .portfolio-category.theme-cream h2 { color: var(--charcoal); }
  .portfolio-category-mosaic {
    margin-top: 50px;
    column-count: 6; column-gap: 3px;
    -webkit-touch-callout: none; user-select: none;
  }
  .portfolio-category-item { break-inside: avoid; margin-bottom: 3px; background: var(--dark3); }
  .portfolio-category-item img { width: 100%; height: auto; object-fit: contain; display: block; }
  /* JS-Masonry (main.js): Bilder werden auf die jeweils kürzeste Spalte verteilt, damit rechts keine Lücke bleibt.
     Die Spaltenzahl kommt weiterhin aus column-count (6 / 4 / 2). */
  .portfolio-category-mosaic.is-masonry { display: flex; align-items: flex-start; }
  .portfolio-category-mosaic.is-masonry .pcm-col { flex: 1 1 0; min-width: 0; }
  @media (max-width: 1024px) {
    .portfolio-category { padding: 70px 0; }
    .portfolio-category .section-label, .portfolio-category h2 { padding: 0 40px; }
    .portfolio-category-mosaic { column-count: 4; }
  }
  @media (max-width: 768px) {
    .portfolio-category { padding: 56px 0; }
    .portfolio-category .section-label, .portfolio-category h2 { padding: 0 24px; }
    .portfolio-category-mosaic { column-count: 3; column-gap: 2px; } /* Handy: 3 Spalten statt 2 (Valentin 14.09.2026, „alles kleiner") */
    .portfolio-category-item { margin-bottom: 2px; }
  }

  /* PORTFOLIO-SEITE: LEERE SCHMALE SEKTION ÜBER "WEDDING" — RESERVIERT FÜR SPÄTERE VIDEOS */
  .portfolio-video-placeholder { min-height: 140px; background: var(--dark2); }

  /* ÜBER MICH */
  .about { display: grid; grid-template-columns: 30% 70%; gap: 0; padding: 0; overflow: hidden; align-items: stretch; }
  /* ABOUT SLIDESHOW */
  .about-slideshow-wrap {
    position: relative;
    overflow: hidden;
    background: var(--dark3);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0 40px 0 0;
  }
  .about-portrait { width: 100%; height: auto; display: block; }
  .about-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.9s ease;
  }
  .about-slide.active { opacity: 1; }
  .about-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
  .slide-dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
  }
  .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(245,242,238,0.3);
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
  }
  .dot.active { background: var(--gold); transform: scale(1.4); }
  .slide-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(23,48,43,0.55);
    border: 1px solid rgba(207,157,123,0.3);
    color: var(--white);
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s, background 0.3s;
  }
  .about-slideshow-wrap:hover .slide-btn { opacity: 1; }
  .slide-btn:hover { background: rgba(207,157,123,0.2); border-color: var(--gold); }
  .slide-prev { left: 16px; }
  .slide-next { right: 16px; }

  .about-videos {
    background: var(--dark3); position: relative; min-height: 700px;
    display: grid; grid-template-rows: 1fr 1fr; overflow: hidden;
  }
  .about-video-main { position: relative; overflow: hidden; }
  .about-video-main video { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.75); }
  .about-video-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  }
  .about-video-small { position: relative; overflow: hidden; cursor: pointer; }
  .about-video-small video {
    width: 100%; height: 100%; object-fit: cover;
    filter: brightness(0.6); transition: filter 0.4s;
    pointer-events: none;
  }
  .about-video-small:hover video { filter: brightness(0.85); }
  .about-video-small-play {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  }
  .about-name-badge {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(23,48,43,0.9), transparent);
    padding: 40px 28px 24px;
    font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-weight: 600;
    color: var(--gold);
  }
  .about-content {
    background: var(--dark2); padding: 48px 56px 28px;
    display: flex; flex-direction: column; justify-content: center;
  }
  .about-content h2 { font-size: clamp(2rem, 3.2vw, 2.8rem); }
  .about-content p { font-size: 0.97rem; line-height: 1.6; color: rgba(245,242,238,0.65); margin-bottom: 14px; }
  .about-content .about-stats { margin: 20px 0 24px; }
  .about-content .stat { padding: 14px 14px; }
  .about-content .skills-list { margin-top: 14px; }
  .about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 40px 0; }
  .stat { background: var(--dark3); padding: 24px 20px; text-align: center; }
  .stat-num { font-family: 'Cormorant Garamond', serif; font-size: 2.8rem; font-weight: 300; color: var(--gold); line-height: 1; display: block; }
  .stat-label { font-family: 'Barlow Condensed', sans-serif; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245,242,238,0.35); margin-top: 6px; display: block; }
  .skills-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
  .skill-tag { padding: 6px 14px; border: 1px solid rgba(207,157,123,0.25); font-family: 'Barlow Condensed', sans-serif; font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(245,242,238,0.45); }

  /* FOTO GALLERY STRIP */
  .photo-strip {
    display: grid; grid-template-columns: 1.2fr 0.8fr 1fr; gap: 2px;
    margin: 0; padding: 0;
  }
  .photo-strip-item { overflow: hidden; position: relative; }
  .photo-strip-item img {
    width: 100%; height: 340px; object-fit: cover; object-position: center top;
    filter: brightness(0.75); transition: transform 0.6s ease, filter 0.4s;
    display: block;
  }
  .photo-strip-item:hover img { transform: scale(1.04); filter: brightness(0.9); }
  .photo-strip-caption {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 20px;
    background: linear-gradient(to top, rgba(23,48,43,0.8), transparent);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(207,157,123,0.7);
  }

  /* PROZESS */
  .process { background: var(--dark2); }
  .process-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 120px;
    row-gap: 0;
    align-items: stretch;
  }
  .process-cell-1a { grid-column: 1; grid-row: 1; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .process-cell-1b {
    grid-column: 2; grid-row: 1;
    display: flex; flex-direction: column; justify-content: center;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .process-cell-2a { grid-column: 1; grid-row: 2; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .process-cell-2b { grid-column: 2; grid-row: 2; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .process-cell-3a { grid-column: 1; grid-row: 3; }
  .process-cell-3b { grid-column: 2; grid-row: 3; }
  .process-header { margin-bottom: 24px; }
  .process-step {
    display: flex; gap: 28px; padding: 32px 0;
    transition: padding-left 0.3s; cursor: default;
  }
  .process-step:hover { padding-left: 8px; }
  .step-num { font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 300; color: rgba(207,157,123,0.25); min-width: 48px; line-height: 1; padding-top: 4px; }
  .step-content h4 { font-family: 'Barlow Condensed', sans-serif; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); margin-bottom: 10px; }
  .step-content p { font-size: 0.88rem; color: rgba(245,242,238,0.5); line-height: 1.7; }
  .process-cta-box { background: var(--dark3); padding: 44px 48px; border-left: 2px solid var(--gold); }
  .process-cta-box h3 { font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 300; margin-bottom: 20px; line-height: 1.2; }
  .process-cta-box p { font-size: 0.9rem; color: rgba(245,242,238,0.55); line-height: 1.7; margin-bottom: 32px; }
  @media (max-width: 1024px) {
    .process-grid {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto auto auto auto;
    }
    .process-cell-1a { grid-column: 1; grid-row: 1; }
    .process-cell-2a { grid-column: 1; grid-row: 2; }
    .process-cell-3a { grid-column: 1; grid-row: 3; }
    .process-cell-2b { grid-column: 1; grid-row: 4; }
    .process-cell-3b { grid-column: 1; grid-row: 5; }
    .process-cell-1b { grid-column: 1; grid-row: 6; border-bottom: none; }
    .process-cell-1b .process-cta-box { margin-top: 32px; }
    .process-cell-3a, .process-cell-3b { border-bottom: 1px solid rgba(255,255,255,0.05); }
  }
  .btn-primary {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 16px 36px; background: var(--gold); color: var(--dark);
    text-decoration: none; font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
    transition: background 0.3s, transform 0.3s;
  }
  .btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); }

  /* REVIEWS */
  .reviews { background: var(--dark); overflow: hidden; }
  .reviews-header { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 60px; align-items: end; }
  .reviews-track-wrapper {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  }
  .reviews-track { display: flex; align-items: flex-start; gap: 20px; animation: scrollReviews 30s linear infinite; width: max-content; }
  .reviews-track:hover { animation-play-state: paused; }
  @keyframes scrollReviews { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .review-item { display: flex; flex-direction: column; align-items: center; }
  .review-logo-top { height: 130px; width: auto; max-width: 240px; object-fit: contain; display: block; margin-bottom: 16px; }
  .review-card { background: var(--dark3); padding: 36px 26px; min-width: 260px; max-width: 260px; border-top: 2px solid var(--gold); transition: transform 0.3s; }
  .review-card-wide { min-width: 460px; max-width: 460px; }
  .review-card:hover { transform: translateY(-4px); }
  .review-stars { color: var(--gold); font-size: 0.85rem; letter-spacing: 0.1em; margin-bottom: 16px; }
  .review-text { font-size: 0.88rem; line-height: 1.75; color: rgba(245,242,238,0.6); margin-bottom: 24px; font-style: italic; }
  .review-name { font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(245,242,238,0.35); }
  .review-placeholder { display: flex; align-items: center; justify-content: center; text-align: center; }
  .review-placeholder-text { font-family: 'Barlow Condensed', sans-serif; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; line-height: 1.9; color: rgba(58,53,52,0.35); }

  /* LOGOS */
  .logos { padding: 80px 60px; background: var(--dark); }
  .logos-label { text-align: center; font-family: 'Barlow Condensed', sans-serif; font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(245,242,238,0.25); margin-bottom: 50px; }
  .logos-track-wrapper { overflow: hidden; mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%); }
  .logos-track { display: flex; align-items: center; gap: 60px; width: max-content; animation: scrollLogos 30s linear infinite; }
  .logos-track:hover { animation-play-state: paused; }
  /* Gegenläufig zu den Kundenstimmen (die 0 -> -50% laufen), gleiche Geschwindigkeit (30s) */
  @keyframes scrollLogos { from { transform: translateX(-50%); } to { transform: translateX(0); } }
  .logo-placeholder { width: 110px; height: 44px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245,242,238,0.2); transition: border-color 0.3s, color 0.3s; }
  .logo-placeholder:hover { border-color: rgba(207,157,123,0.3); color: rgba(207,157,123,0.5); }
  .logo-placeholder img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
  .logo-placeholder.partner-logo { background: none; border: none; width: 131px; height: 83px; }

  /* KONTAKT */
  .contact { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; overflow: hidden; }
  .contact-info { background: var(--dark3); padding: 100px 80px; display: flex; flex-direction: column; justify-content: center; }
  .contact-info > p, #kontakt-form .contact-info-text > p { font-size: 0.97rem; line-height: 1.8; color: rgba(245,242,238,0.55); margin-bottom: 48px; }
  #kontakt-form .contact-info { position: relative; min-height: 620px; }
  #kontakt-form .contact-info-image { position: absolute; left: 0; top: 0; bottom: 0; width: 45%; }
  #kontakt-form .contact-info-image img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; display: block; }
  #kontakt-form .contact-info-text { margin-left: calc(45% + 40px); }

  /* KONTAKT — Desktop: Sektionshöhe deckeln, Bild unten verankert */
  @media (min-width: 1024px) {
    #kontakt-form { max-height: min(90vh, 1000px); }
    #kontakt-form .contact-info,
    #kontakt-form .contact-form { max-height: min(90vh, 1000px); overflow-y: auto; }
    #kontakt-form .contact-info-image { top: auto; height: auto; max-height: min(78vh, 780px); }
    #kontakt-form .contact-info-image img { width: auto; height: auto; max-height: min(78vh, 780px); object-fit: contain; object-position: bottom center; margin-left: auto; display: block; }
  }

  .contact-detail { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; text-decoration: none; color: inherit; }
  .contact-detail-icon { width: 44px; height: 44px; border: 1px solid rgba(207,157,123,0.25); display: flex; align-items: center; justify-content: center; color: var(--gold); flex-shrink: 0; transition: color 0.3s, border-color 0.3s; }
  .contact-detail-text span { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245,242,238,0.3); margin-bottom: 4px; }
  .contact-detail-text .contact-detail-value, .contact-detail-text p { display: block; color: rgba(245,242,238,0.7); font-size: 0.92rem; font-family: 'Barlow', sans-serif; text-transform: none; letter-spacing: normal; margin-bottom: 0; transition: color 0.3s; }
  a.contact-detail:hover .contact-detail-value { color: var(--gold); }
  a.contact-detail:hover .contact-detail-icon { color: var(--gold-light); border-color: var(--gold); }
  .contact-form { background: var(--dark2); padding: 100px 80px; display: flex; flex-direction: column; justify-content: center; }
  .contact-form h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 300; margin-bottom: 36px; }
  .form-group { margin-bottom: 20px; }
  .form-label { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245,242,238,0.35); margin-bottom: 8px; }
  .form-input, .form-select, .form-textarea { width: 100%; background: var(--dark3); border: 1px solid rgba(255,255,255,0.07); border-bottom: 1px solid rgba(207,157,123,0.2); color: var(--white); padding: 14px 16px; font-family: 'Barlow', sans-serif; font-size: 0.9rem; font-weight: 300; outline: none; transition: border-color 0.3s; }
  .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--gold); }
  .form-input.is-invalid, .form-select.is-invalid, .form-textarea.is-invalid { border-color: #D98865; box-shadow: 0 0 0 1px rgba(217,136,101,0.3); }
  .form-select option { background: var(--dark3); }
  .form-textarea { resize: vertical; min-height: 120px; }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .form-submit { margin-top: 8px; padding: 16px 40px; background: var(--gold); color: var(--dark); border: none; font-family: 'Barlow Condensed', sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: background 0.3s, transform 0.3s; align-self: flex-start; }
  .form-submit:hover { background: var(--gold-light); transform: translateY(-2px); }
  .form-submit:disabled { opacity: 0.6; cursor: default; transform: none; }
  .form-feedback { display: none; margin-top: 16px; font-size: 0.85rem; line-height: 1.7; }
  .form-feedback.is-visible { display: block; }
  .form-feedback-error { color: rgba(245,242,238,0.6); }
  .form-feedback-error a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(207,157,123,0.4); }
  .form-feedback-error a:hover { color: var(--gold-light); }
  .form-success { padding: 8px 0; }
  .form-success h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 300; color: var(--white); margin-bottom: 12px; }
  .form-success p { font-size: 0.9rem; line-height: 1.7; color: rgba(245,242,238,0.55); }

  /* FOOTER */
  footer { background: #0F2420; border-top: 1px solid rgba(255,255,255,0.06); padding: 60px 60px 40px; }
  .footer-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 60px; }
  .footer-links-group { display: flex; gap: 80px; }
  .footer-brand {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    width: fit-content;
    font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 600; color: var(--white); margin-bottom: 16px;
  }
  .footer-brand-name { white-space: nowrap; }
  .footer-brand-name span { color: var(--gold); }
  .footer-brand img { width: 150px; max-width: 100%; height: auto; display: block; }
  .footer-heading { font-family: 'Barlow Condensed', sans-serif; font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
  .footer-links { list-style: none; }
  .footer-links li { margin-bottom: 10px; }
  .footer-links a { text-decoration: none; color: rgba(245,242,238,0.35); font-size: 0.85rem; transition: color 0.3s; }
  .footer-links a:hover { color: var(--white); }
  .footer-bottom { border-top: 1px solid rgba(255,255,255,0.05); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; }
  .footer-copy { font-size: 0.75rem; color: rgba(245,242,238,0.2); }
  .footer-legal { display: flex; gap: 32px; }
  .footer-legal a { font-size: 0.75rem; color: rgba(245,242,238,0.2); text-decoration: none; transition: color 0.3s; }
  .footer-legal a:hover { color: var(--gold); }

  /* LIGHT SECTION OVERRIDES (background alternates between the two main colors, per Briefing) */
  .reveal-delay-6 { transition-delay: 0.6s; }
  .services, .about-content, .reviews, .contact-info { background: var(--cream); }
  .services .section-label, .about-content .section-label, .reviews .section-label, .contact-info .section-label { color: var(--brown); }
  .services .section-label::after, .about-content .section-label::after, .reviews .section-label::after, .contact-info .section-label::after { background: var(--brown); }
  .services h2, .about-content h2, .reviews h2, .contact-info h2 { color: var(--charcoal); }
  .services h2 em, .about-content h2 em, .reviews h2 em, .contact-info h2 em { color: var(--brown); }
  .services-intro p, .about-content p, .contact-info > p, #kontakt-form .contact-info-text > p { color: rgba(58,53,52,0.65); }
  .service-card { background: var(--cream2); }
  .service-card:hover { background: var(--cream3); }
  .service-card h3 { color: var(--charcoal); }
  .service-card p { color: rgba(58,53,52,0.55); }
  .service-items li { color: rgba(58,53,52,0.5); border-bottom: 1px solid rgba(58,53,52,0.08); }
  .service-num { color: rgba(114,75,57,0.18); }
  .services .btn-ghost { color: var(--brown); border-bottom: 1px solid rgba(114,75,57,0.35); }
  .reviews .review-card { background: var(--cream2); border-top: 2px solid var(--brown); }
  .reviews .review-card.review-placeholder { border-top: 2px dashed rgba(114,75,57,0.35); }
  .reviews .review-stars { color: var(--brown); }
  .reviews .review-text { color: rgba(58,53,52,0.62); }
  .reviews .review-name { color: rgba(58,53,52,0.4); }
  .about-content .stat { background: var(--cream2); }
  .about-content .stat-num { color: var(--brown); }
  .about-content .stat-label { color: rgba(58,53,52,0.42); }
  .about-content .skill-tag { color: rgba(58,53,52,0.55); border: 1px solid rgba(114,75,57,0.3); }
  .contact-info .contact-detail-icon { border: 1px solid rgba(114,75,57,0.3); color: var(--brown); }
  .contact-info .contact-detail-text span { color: rgba(58,53,52,0.4); }
  .contact-info .contact-detail-text .contact-detail-value, .contact-info .contact-detail-text p { color: rgba(58,53,52,0.72); }
  .contact-info a.contact-detail:hover .contact-detail-value { color: var(--brown); }
  .contact-info a.contact-detail:hover .contact-detail-icon { color: var(--charcoal); border-color: var(--brown); }

  /* REVEAL */
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
  .reveal-delay-4 { transition-delay: 0.4s; }
  .reveal-delay-5 { transition-delay: 0.5s; }

  /* PAGE HERO — placeholder crossfade slideshow background (used on subpages) */
  .bg-slide {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    animation: bgCrossfade 18s infinite;
  }
  .bg-slide-1 { background: linear-gradient(135deg, #1C3A33, #21453D); animation-delay: 0s; }
  .bg-slide-2 { background: linear-gradient(135deg, #21453D, #17302B); animation-delay: 6s; }
  .bg-slide-3 { background: linear-gradient(135deg, #17302B, #2A5147); animation-delay: 12s; }
  .bg-slide span {
    font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem;
    letter-spacing: 0.3em; text-transform: uppercase;
    color: rgba(207,157,123,0.3);
    border: 1px dashed rgba(207,157,123,0.22);
    padding: 10px 22px;
  }
  @keyframes bgCrossfade {
    0%, 4%    { opacity: 0; }
    8%, 29%   { opacity: 1; }
    33%, 100% { opacity: 0; }
  }

  /* GENERIC IMAGE / VIDEO PLACEHOLDERS (used across subpages) */
  .img-placeholder {
    display: flex; align-items: center; justify-content: center;
    background: rgba(207,157,123,0.05);
    border: 1px dashed rgba(207,157,123,0.28);
    color: rgba(207,157,123,0.45);
    font-family: 'Barlow Condensed', sans-serif; font-size: 0.62rem;
    letter-spacing: 0.18em; text-transform: uppercase;
    text-align: center; padding: 10px; width: 100%; height: 100%;
  }
  .portrait-placeholder {
    width: 100%; aspect-ratio: 3/4; margin-bottom: 32px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(114,75,57,0.06);
    border: 1px dashed rgba(114,75,57,0.3);
    color: rgba(114,75,57,0.5);
    font-family: 'Barlow Condensed', sans-serif; font-size: 0.62rem;
    letter-spacing: 0.18em; text-transform: uppercase; text-align: center; padding: 10px;
  }

  /* SUBPAGE: LEISTUNGEN DETAIL LAYOUT */
  .page-intro { background: var(--cream); }
  .page-intro-compact { padding-bottom: 40px; position: relative; }
  .intro-deco { display: flex; justify-content: center; align-items: flex-start; gap: 60px; margin-top: 32px; pointer-events: none; }
  .intro-deco img { display: block; }
  .intro-deco-cam1 { width: 100px; transform: rotate(-11deg); }
  .intro-deco-cam2 { width: 110px; transform: rotate(0); margin-top: 30px; }
  @media (min-width: 1100px) {
    .intro-deco { position: absolute; top: 145px; left: 63%; margin-top: 0; justify-content: flex-start; }
  }
  .page-intro .section-label { color: var(--brown); }
  .page-intro .section-label::after { background: var(--brown); }
  .page-intro h2 { color: var(--charcoal); }
  .page-intro h2 em { color: var(--brown); }
  .page-intro p { color: rgba(58,53,52,0.65); font-size: 1rem; line-height: 1.8; max-width: 680px; margin-top: 20px; }

  /* SUBPAGE: IMPRESSUM / DATENSCHUTZ */
  .legal-section { background: var(--cream); padding: 80px 60px 140px; }
  .legal-content { max-width: 760px; margin: 0 auto; }
  .legal-content h2 {
    font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 500;
    color: var(--charcoal); margin: 48px 0 14px;
  }
  .legal-content h2:first-child { margin-top: 0; }
  .legal-content p { font-size: 0.95rem; line-height: 1.85; color: rgba(58,53,52,0.7); margin-bottom: 14px; }
  .legal-content a { color: var(--brown); text-decoration: underline; text-decoration-color: rgba(114,75,57,0.35); }
  .legal-content a:hover { color: var(--charcoal); }

  .leist-grid { background: var(--dark2); display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 100px 60px; }
  .leist-card { background: var(--dark3); padding: 44px 32px; position: relative; overflow: hidden; }
  .leist-card .img-placeholder { height: 160px; margin: -44px -32px 28px; width: calc(100% + 64px); }
  .leist-card h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; color: var(--white); }
  .leist-card p { font-size: 0.85rem; color: rgba(245,242,238,0.5); line-height: 1.7; }

  .gallery-strip { background: var(--cream); padding: 100px 60px; text-align: center; }
  .gallery-strip .section-label { justify-content: center; color: var(--brown); }
  .gallery-strip .section-label::after { display: none; }
  .gallery-strip h2 { color: var(--charcoal); }
  .gallery-strip h2 em { color: var(--brown); }
  .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1100px; margin: 48px auto 0; }
  .gallery-grid .img-placeholder { aspect-ratio: 4/5; }

  .video-placeholder-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1100px; margin: 48px auto 0; }
  .video-placeholder-grid .portfolio-frame { max-width: none; margin: 0; aspect-ratio: 16/9; }

  .page-cta { background: var(--dark2); padding: 100px 60px; text-align: center; }
  .page-cta-box { max-width: 640px; margin: 0 auto; }
  .page-cta-box h2 { margin-bottom: 20px; }
  .page-cta-box p { font-size: 0.95rem; color: rgba(245,242,238,0.55); line-height: 1.7; margin-bottom: 36px; }

  /* SUBPAGE: ÜBER MICH STORY LAYOUT */
  .story-section { background: var(--cream); padding: 70px 60px; }
  .story-row { display: grid; grid-template-columns: 1fr 2fr; gap: 70px; align-items: center; max-width: 970px; margin: 0 auto 70px; }
  .story-row:last-child { margin-bottom: 0; }
  .story-row.reverse { grid-template-columns: 2fr 1fr; }
  .story-row.reverse .story-img { order: 2; }
  .story-row.reverse .story-text { order: 1; }
  .story-img .img-placeholder { aspect-ratio: 4/5; }
  .story-img img { max-width: 300px; width: 100%; height: auto; display: block; }
  .story-text .story-label { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--charcoal); margin-bottom: 14px; }
  .story-text h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; font-weight: 500; color: var(--charcoal); margin-bottom: 16px; }
  .story-text p { font-size: 1rem; line-height: 1.9; color: rgba(58,53,52,0.68); }

  /* ÜBER MICH: BILD-GALERIE UNTER DEN STORY-BLÖCKEN */
  .about-gallery { max-width: 970px; margin: 70px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .about-gallery-item { aspect-ratio: 3/4; overflow: hidden; background: var(--dark3); }
  .about-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .about-stats-section { background: var(--dark2); padding: 90px 60px; }
  .about-stats-section .about-stats { max-width: 900px; margin: 0 auto 48px; }
  .about-stats-section .skills-list { justify-content: center; max-width: 900px; margin: 0 auto; }

  /* KONTAKT PAGE */
  .contact-intro-section { background: var(--cream); padding: 80px 60px 0; text-align: center; }
  .contact-intro-section .section-label { justify-content: center; color: var(--brown); }
  .contact-intro-section .section-label::after { display: none; }
  .contact-intro-section h2 { color: var(--charcoal); }
  .contact-intro-section h2 em { color: var(--brown); }

  #kontakt-form .contact-form { justify-content: flex-start; padding-top: 70px; padding-bottom: 64px; }
  #kontakt-form .contact-info { padding-bottom: 64px; }

  /* KONTAKT: ABLAUF-HINWEIS UNTER DEM FORMULAR */
  .contact-form-note { margin-top: 40px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.08); }
  .contact-form-note h4 { font-family: 'Barlow Condensed', sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
  .contact-form-note p { font-size: 0.88rem; line-height: 1.8; color: rgba(245,242,238,0.55); }

  /* ÜBER MICH: MOBILE STACKING */
  @media (max-width: 1024px) {
    .about { grid-template-columns: 1fr; }
    .about-slideshow-wrap { padding: 24px 0 0; } /* mobil/Tablet: Portrait links am Rand (Valentin 14.09.2026) */
    .about-portrait { width: 76%; } /* mobil/Tablet: deutlich kleiner, bleibt am linken Rand (Valentin 14.09.2026) */
    .about-content { padding: 40px 24px 32px; }
  }

  /* ======================================================= */
  /* MOBILE / RESPONSIVE — gilt für alle Seiten                */
  /* Desktop (>1024px) bleibt unangetastet, alles hier ist     */
  /* zusätzliche Media-Query-Anpassung, keine Basis-Änderung.  */
  /* ======================================================= */

  html, body { max-width: 100%; overflow-x: hidden; }
  img, video { max-width: 100%; }

  /* Custom-Cursor auf Touch-Geräten komplett deaktivieren */
  @media (hover: none), (pointer: coarse) {
    .cursor, .cursor-ring { display: none !important; }
    body { cursor: auto; }
  }

  /* ---------- Tablet (≤1024px) ---------- */
  @media (max-width: 1024px) {
    section { padding: 90px 40px; }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .service-card:nth-child(3) { grid-column: span 2; }
    .service-card-wide { grid-column: 1 / -1 !important; }
    .leist-grid { grid-template-columns: repeat(2, 1fr); padding: 80px 40px; }
    .gallery-grid, .video-placeholder-grid { grid-template-columns: repeat(2, 1fr); }
    .story-row { gap: 40px; }
    .contact { grid-template-columns: 1fr; }
    .contact-info, .contact-form { padding: 70px 48px; }
  }

  /* ---------- Mobile (≤768px) ---------- */
  @media (max-width: 768px) {
    section { padding: 60px 24px; }
    h2 { font-size: clamp(2rem, 9vw, 2.8rem); }
    .section-label { font-size: 0.65rem; letter-spacing: 0.22em; }

    /* NAV bar height already reduced above; ensure logo stays compact */
    .nav-logo { font-size: 1.3rem; }
    .nav-logo img { height: 1.3rem; }

    /* HERO — Homepage mobil (Vorgabe Valentin 14.09.2026): Video klein als eigenes 16:9-Feld über dem Text,
       bündig mit den Seitenrändern, hell und ohne grünes Overlay; Text, Button und Scroll-Hinweis fließen darunter. */
    .hero.hero-compact {
      flex-direction: column;
      height: auto; aspect-ratio: auto; max-height: none; min-height: 0;
      padding: 100px 20px 40px;
    }
    .hero.hero-compact .hero-bg {
      position: relative; inset: auto; margin: 0 0 30px;
      width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--dark3);
    }
    .hero.hero-compact .hero-bg video { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: none; }
    .hero.hero-compact .hero-bg::after { display: none; }
    .hero.hero-compact .hero-content { padding: 0; max-width: 100%; }
    .hero.hero-compact .hero-scroll { position: static; transform: none; margin-top: 26px; }
    .hero-content { padding: 0 8px; max-width: 100%; }
    .hero-title { font-size: clamp(1.7rem, 8vw, 2.4rem); }
    .hero-subtitle { font-size: 1rem; }
    .hero-cta { padding: 14px 28px; min-height: 44px; }

    /* HERO — generische Unterseiten (Bild-Platzhalter-Slideshow) */
    .hero:not(.hero-compact) { padding: 0 20px; }
    .hero.hero-legal { padding: 130px 20px 40px; }

    /* SERVICES / LEISTUNGEN-KARTEN */
    .services-intro { grid-template-columns: 1fr; gap: 32px; }
    .services-grid { grid-template-columns: 1fr; }
    .service-card:nth-child(3) { grid-column: span 1; }
    .service-card-wide { grid-column: 1 / -1 !important; }
    /* Leistungskarten mobil kompakt (Valentin 14.09.2026): weniger Innenabstand, keine Mindesthöhe, engere Abstände */
    .service-card { padding: 24px 20px 26px; }
    .service-card-img { height: 180px; margin: -24px -20px 20px; } /* Negativränder = neues Padding, damit das Bild wieder bündig liegt */
    .service-card-info { min-height: 0; }
    .service-num { font-size: 2rem; margin-bottom: 10px; }
    .service-card h3 { margin-bottom: 10px; }
    .service-card p { margin-bottom: 14px; }
    .service-items { margin-bottom: 18px; }
    .service-items li { padding: 7px 0; }
    .service-card .btn-ghost { margin-top: 0; }
    .service-card-wide-text { flex: 1 1 100%; }
    .service-card-wide-img {
      flex: 1 1 100%;
      margin: 24px 0 0 0;
      aspect-ratio: 16 / 10;
    }

    /* PORTFOLIO-MOSAIK (Homepage) — Video-Regel bereits weiter oben (≤768px Block) */
    .portfolio-gallery { padding: 0; }

    /* ÜBER MICH (Homepage-Teaser) */
    .about-content { text-align: left; }
    .about-stats { grid-template-columns: repeat(3, 1fr); }

    /* ABLAUF-SEKTION bereits per eigenem ≤1024px-Grid einspaltig (siehe oben) */
    .process-cta-box { padding: 32px 28px; }

    /* LOGOS / PARTNER */
    .logos { padding: 56px 24px; }
    .logos-track { gap: 36px; }

    /* REVIEWS — mobil kompakt (Valentin 14.09.2026): weniger Luft oben/unten, kleinere Logos/Karten,
       Karten oben und unten eng am Text; Antippen hält den Lauf an (main.js) */
    .reviews { padding-top: 48px; padding-bottom: 40px; }
    .reviews-header { grid-template-columns: 1fr; gap: 12px; align-items: start; margin-bottom: 24px; }
    .reviews-track { gap: 14px; }
    .review-logo-top { height: 84px; max-width: 180px; margin-bottom: 10px; }
    .review-card { min-width: 78vw; max-width: 78vw; padding: 16px 18px 14px; }
    .review-stars { font-size: 0.78rem; margin-bottom: 8px; }
    .review-text { font-size: 0.84rem; line-height: 1.55; margin-bottom: 10px; }
    .review-name { font-size: 0.66rem; }

    /* KONTAKT */
    .contact-info, .contact-form { padding: 56px 24px; }
    #kontakt-form .contact-info-image { position: static; width: 100%; max-width: 190px; margin: 0 auto 20px; } /* mobil: Portrait deutlich kleiner, zentriert (Valentin 14.09.2026) */
    #kontakt-form .contact-info-image img { width: 100%; height: auto; }
    #kontakt-form .contact-info-text { margin-left: 0; }
    .form-grid { grid-template-columns: 1fr; }
    .contact-detail-icon { width: 40px; height: 40px; }
    .form-submit { width: 100%; justify-content: center; min-height: 48px; }

    /* FOOTER */
    .footer-top { flex-direction: column; align-items: center; gap: 40px; text-align: center; }
    /* Footer mobil (Valentin 14.09.2026): die drei Link-Spalten nebeneinander statt untereinander */
    .footer-links-group { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 12px; text-align: left; width: 100%; }
    .footer-links-group > div { flex: 1 1 0; min-width: 0; }
    .footer-heading { font-size: 0.6rem; letter-spacing: 0.18em; margin-bottom: 12px; }
    .footer-links li { margin-bottom: 6px; }
    .footer-links a { font-size: 0.76rem; overflow-wrap: anywhere; }
    footer { padding: 48px 24px 32px; }
    .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }

    /* SUBPAGES: Leistungen-Detail-Layout */
    .leist-grid { grid-template-columns: 1fr; padding: 56px 24px; gap: 24px; }
    .gallery-strip { padding: 56px 24px; }
    .gallery-grid, .video-placeholder-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .page-cta { padding: 48px 24px; }

    /* SUBPAGE: ÜBER MICH STORY */
    /* ÜBER MICH mobil (Valentin 14.09.2026): Bilder bündig zur Textbreite als flache 4:3-Ausschnitte,
       engere Abstände, kompaktere Sektionen */
    .page-intro-compact { padding-bottom: 24px; }
    .story-section { padding: 44px 24px 48px; }
    .story-row, .story-row.reverse { grid-template-columns: 1fr; gap: 16px; margin-bottom: 40px; }
    .story-row.reverse .story-img, .story-row.reverse .story-text { order: 0; }
    .story-img img { max-width: none; width: 100%; height: auto; max-height: 480px; object-fit: cover; object-position: center 20%; } /* eigenes Format, nur sehr hohe Bilder sanft gekappt (Valentin: 4:3 war zu stark beschnitten) */
    .story-text .story-label { font-size: 1.3rem; margin-bottom: 8px; }
    .story-text p { font-size: 0.95rem; line-height: 1.75; }
    .about-gallery { grid-template-columns: repeat(2, 1fr); gap: 3px; margin-top: 36px; }
    .about-stats-section { padding: 44px 24px; }
    .about-stats-section .about-stats { margin-bottom: 28px; }

    /* SUBPAGE: KONTAKT */
    .contact-intro-section { padding: 56px 24px 0; }

    /* SUBPAGE: IMPRESSUM / DATENSCHUTZ */
    .legal-section { padding: 48px 24px 80px; }
    .legal-content h2 { font-size: 1.3rem; margin: 36px 0 12px; }

    /* Touch-Targets */
    .btn-primary, .btn-ghost, .form-submit { min-height: 44px; }
    .footer-links a, .footer-legal a { display: inline-block; padding: 4px 0; }
    .nav-icon-link { padding: 6px; }
  }

  /* ---------- Kleine Handys (≤480px) ---------- */
  @media (max-width: 480px) {
    section { padding: 48px 18px; }
    .hero-content, .hero.hero-compact { padding-left: 16px; padding-right: 16px; }
    .service-card { padding: 22px 18px 24px; }
    .service-card-img { margin: -22px -18px 18px; }
    .process-cta-box { padding: 28px 22px; }
    .contact-info, .contact-form { padding: 44px 18px; }
    .about-stats { gap: 1px; }
    .story-section, .about-stats-section, .page-cta { padding-left: 18px; padding-right: 18px; }
    .stat { padding: 16px 8px; }
    .stat-num { font-size: 2.2rem; }
    .skills-list { gap: 6px; }
    .skill-tag { font-size: 0.62rem; padding: 5px 10px; }
    .footer-brand img { width: 120px; }
    .footer-links a { font-size: 0.7rem; }
    .footer-links-group { gap: 8px; }
    footer { padding: 40px 18px 28px; }
    .legal-section { padding: 40px 18px 64px; }
  }

  /* ======================================================= */
  /* STUDIO & AKADEMIE — Rebranding-Bausteine (2026-08)        */
  /* ======================================================= */

  /* Wortmarken-Zusatz „Studio & Akademie" unter dem Logo (Nav + Footer) */
  .nav-logo-stack { display: inline-block; line-height: 1; color: var(--white); white-space: nowrap; }
  .nav-logo .nav-logo-sub { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 0.5rem; font-weight: 500; letter-spacing: 0.42em; text-transform: uppercase; color: rgba(207,157,123,0.8); margin-top: 5px; white-space: nowrap; }
  .footer-brand-sub { font-family: 'Barlow Condensed', sans-serif; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(207,157,123,0.75); margin-top: -10px; white-space: nowrap; }

  /* STARTSEITE: Zwei Bereiche — Studio & Akademie */
  .pillars { background: var(--dark); padding: 110px 60px; }
  .pillars-header { text-align: center; margin-bottom: 56px; }
  .pillars-header .section-label { justify-content: center; }
  .pillars-header .section-label::after { display: none; }
  .pillars-header p { font-size: 0.98rem; line-height: 1.8; color: rgba(245,242,238,0.55); max-width: 620px; margin: 18px auto 0; }
  .pillars-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; max-width: 1240px; margin: 0 auto; }
  .pillar-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 500px; padding: 48px 44px; text-decoration: none; overflow: hidden; background: var(--dark3); }
  .pillar-media { position: absolute; inset: 0; }
  .pillar-media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55) saturate(0.92); transition: transform 0.7s ease, filter 0.4s; }
  .pillar-card:hover .pillar-media img { transform: scale(1.045); filter: brightness(0.68) saturate(1); }
  .pillar-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(23,48,43,0.94) 0%, rgba(23,48,43,0.35) 55%, rgba(23,48,43,0.12) 100%); }
  .pillar-akademie-bg { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(90% 90% at 82% 0%, rgba(227,190,158,0.20) 0%, rgba(207,157,123,0.06) 36%, rgba(207,157,123,0) 62%), linear-gradient(155deg, #1E3D36 0%, #22463E 44%, #142C27 100%); }
  .pillar-akademie-bg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .pillar-content { position: relative; z-index: 2; }
  .pillar-tag { font-family: 'Barlow Condensed', sans-serif; font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
  .pillar-card h3 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 300; color: var(--white); margin-bottom: 14px; line-height: 1.1; }
  .pillar-card h3 em { font-style: italic; color: var(--gold); }
  .pillar-card p { font-size: 0.92rem; line-height: 1.7; color: rgba(245,242,238,0.65); max-width: 430px; margin-bottom: 22px; }
  .pillar-points { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; list-style: none; padding: 0; }
  .pillar-points li { padding: 5px 12px; border: 1px solid rgba(207,157,123,0.35); font-family: 'Barlow Condensed', sans-serif; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,242,238,0.7); }
  .pillar-cta { display: inline-flex; align-items: center; gap: 10px; font-family: 'Barlow Condensed', sans-serif; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid rgba(207,157,123,0.35); padding-bottom: 4px; width: fit-content; transition: border-color 0.3s, gap 0.3s; }
  .pillar-card:hover .pillar-cta { border-color: var(--gold); gap: 16px; }
  /* Nebeneinander (Desktop): beide Karten teilen sich ein Zeilenraster (Subgrid), damit Kicker, Überschrift,
     Text, Chips und Link links und rechts auf exakt gleicher Höhe liegen. Zeile 1 = flexibler Abstand nach oben. */
  @media (min-width: 1025px) {
    .pillars-grid { grid-template-rows: 1fr auto auto auto auto auto; min-height: 500px; }
    .pillar-card { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; grid-row: span 6; justify-content: stretch; }
    .pillar-content { display: contents; }
    .pillar-content > * { position: relative; z-index: 2; }
    .pillar-tag { grid-row: 2; }
    .pillar-card h3 { grid-row: 3; }
    .pillar-card p { grid-row: 4; }
    .pillar-points { grid-row: 5; }
    .pillar-cta { grid-row: 6; justify-self: start; }
  }

  /* UNTERSEITEN: Foto-Hero (links unten ausgerichtet) */
  .hero.hero-page { height: auto; min-height: 62vh; padding: 200px 60px 90px; display: flex; align-items: flex-end; justify-content: flex-start; text-align: left; }
  .hero.hero-page .hero-content { margin: 0; padding: 0; max-width: 820px; }
  .hero.hero-page .hero-eyebrow { justify-content: flex-start; }
  .hero.hero-page .hero-subtitle { margin-left: 0; }

  /* STUDIO-ZWISCHENSEITE: Bereichs-Auswahl */
  .studio-choice { background: var(--cream); padding: 90px 60px 110px; }
  .studio-choice-header { text-align: center; margin-bottom: 56px; }
  .studio-choice-header .section-label { justify-content: center; color: var(--brown); }
  .studio-choice-header .section-label::after { display: none; }
  .studio-choice-header h2 { color: var(--charcoal); }
  .studio-choice-header h2 em { color: var(--brown); }
  .studio-choice-header p { font-size: 0.98rem; line-height: 1.8; color: rgba(58,53,52,0.65); max-width: 620px; margin: 18px auto 0; }
  .studio-choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1240px; margin: 0 auto; }
  .studio-choice-card { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; text-decoration: none; background: var(--dark3); }
  .studio-choice-card img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.68); transition: transform 0.7s ease, filter 0.4s; }
  .studio-choice-card:hover img { transform: scale(1.05); filter: brightness(0.8); }
  .studio-choice-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(23,48,43,0.92) 0%, rgba(23,48,43,0.25) 45%, rgba(23,48,43,0.05) 100%); }
  .studio-choice-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 28px; z-index: 2; }
  .studio-choice-num { font-family: 'Cormorant Garamond', serif; font-size: 2.4rem; font-weight: 300; color: rgba(207,157,123,0.45); line-height: 1; margin-bottom: 12px; }
  .studio-choice-content h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.9rem; font-weight: 300; color: var(--white); margin-bottom: 10px; line-height: 1.1; }
  .studio-choice-content p { font-size: 0.86rem; line-height: 1.6; color: rgba(245,242,238,0.7); margin-bottom: 18px; }
  .studio-choice-link { display: inline-flex; align-items: center; gap: 10px; font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid rgba(207,157,123,0.35); padding-bottom: 4px; transition: border-color 0.3s, gap 0.3s; }
  .studio-choice-card:hover .studio-choice-link { border-color: var(--gold); gap: 16px; }

  /* UNTERSEITEN: echte Bilder in den Leistungs-Karten */
  .leist-card-img { height: 180px; margin: -44px -32px 28px; width: calc(100% + 64px); overflow: hidden; background: var(--dark2); }
  .leist-card-img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.85); transition: transform 0.6s ease, filter 0.4s; display: block; }
  .leist-card:hover .leist-card-img img { transform: scale(1.05); filter: brightness(0.95); }

  /* UNTERSEITEN: Galerie-Mosaik (Masonry auf Creme) + Button */
  .gallery-mosaic { margin-top: 48px; column-count: 4; column-gap: 4px; -webkit-touch-callout: none; user-select: none; }
  .gallery-mosaic .gallery-item { break-inside: avoid; margin-bottom: 4px; background: var(--cream2); }
  .gallery-mosaic img { width: 100%; height: auto; display: block; }
  .gallery-strip .btn-primary { margin-top: 44px; }

  /* AKADEMIE-SEITE */
  .ak-section-dark { background: var(--dark2); padding: 110px 60px; }
  .ak-section-dark .ak-intro { max-width: 720px; }
  .ak-section-dark .ak-intro p { font-size: 0.98rem; line-height: 1.8; color: rgba(245,242,238,0.6); margin-top: 20px; }
  .ak-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; max-width: 1240px; margin: 56px auto 0; }
  .ak-card { background: var(--dark3); padding: 44px 38px; border-top: 2px solid var(--gold); }
  .ak-num { font-family: 'Cormorant Garamond', serif; font-size: 3rem; font-weight: 300; color: rgba(207,157,123,0.25); line-height: 1; margin-bottom: 18px; }
  .ak-card h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); margin-bottom: 14px; }
  .ak-card p { font-size: 0.9rem; color: rgba(245,242,238,0.55); line-height: 1.75; }
  .ak-card ul { list-style: none; margin-top: 20px; padding: 0; }
  .ak-card ul li { font-size: 0.84rem; color: rgba(245,242,238,0.5); padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; align-items: center; gap: 10px; }
  .ak-card ul li::before { content: '—'; color: var(--gold); font-size: 0.7rem; }
  .ak-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; max-width: 1240px; margin: 56px auto 0; }
  .ak-feature { background: rgba(255,255,255,0.03); border: 1px solid rgba(207,157,123,0.15); padding: 30px 24px; text-align: center; }
  .ak-feature svg { color: var(--gold); margin-bottom: 14px; }
  .ak-feature h4 { font-family: 'Barlow Condensed', sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); margin-bottom: 10px; }
  .ak-feature p { font-size: 0.82rem; color: rgba(245,242,238,0.5); line-height: 1.65; }
  .ak-phasen { background: var(--dark); padding: 110px 60px; }
  .ak-phasen-grid { max-width: 900px; margin: 40px auto 0; }
  .ak-phasen-grid .process-step { border-bottom: 1px solid rgba(255,255,255,0.05); }
  .ak-phasen-grid .process-step:last-child { border-bottom: none; }
  .ak-note { max-width: 720px; margin: 48px auto 0; text-align: center; font-size: 0.85rem; line-height: 1.8; color: rgba(245,242,238,0.4); }

  /* AKADEMIE-SEITE — Filmstreifen-Look (28.08.2026) */
  .hero.hero-akademie { height: auto; min-height: 62vh; padding: 180px 60px 100px; background: radial-gradient(90% 90% at 82% 0%, rgba(227,190,158,0.20) 0%, rgba(207,157,123,0.06) 36%, rgba(207,157,123,0) 62%), linear-gradient(155deg, #1E3D36 0%, #22463E 44%, #142C27 100%); }
  .hero-akademie .hero-bg::after { background: linear-gradient(to top, rgba(20,44,39,0.55) 0%, rgba(20,44,39,0) 45%); }
  .hero-akademie .hero-bg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero-akademie .hero-subtitle { margin-bottom: 34px; }
  .hero-akademie .hero-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; padding: 0; margin: 0 auto; }
  .hero-akademie .hero-chips li { padding: 6px 14px; border: 1px solid rgba(207,157,123,0.4); font-family: 'Barlow Condensed', sans-serif; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,242,238,0.75); }
  .ak-card { transition: background 0.4s ease, transform 0.4s ease; }
  .ak-card:hover { background: #26493F; transform: translateY(-4px); }
  .ak-feature { transition: border-color 0.3s, background 0.3s, transform 0.3s; }
  .ak-feature:hover { border-color: rgba(207,157,123,0.45); background: rgba(255,255,255,0.05); transform: translateY(-3px); }
  .page-cta.ak-cta { position: relative; overflow: hidden; background: radial-gradient(80% 90% at 85% 0%, rgba(227,190,158,0.14) 0%, rgba(207,157,123,0) 55%), var(--dark2); }
  .ak-cta-bg { position: absolute; inset: 0; pointer-events: none; }
  .ak-cta-bg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .page-cta.ak-cta .page-cta-box { position: relative; }
  @media (max-width: 768px) {
    .hero.hero-akademie { padding: 150px 24px 70px; min-height: 0; }
  }

  /* HOCHZEITSSEITE — Versprechen, Ablauf, Impressionen-Platzhalter (29.08.2026) */
  .ak-section-dark.hz-versprechen { background: var(--dark); }
  .ak-section-dark.hz-versprechen .ak-card { background: var(--dark2); }
  .ak-section-dark.hz-versprechen .ak-card:hover { background: #24463E; }
  .ak-phasen.hz-ablauf { background: var(--dark2); }
  .hz-past-sub { font-size: 0.95rem; color: rgba(58,53,52,0.6); max-width: 560px; margin: 18px auto 0; line-height: 1.7; }
  .hz-past-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1000px; margin: 48px auto 0; }
  .hz-past-item { aspect-ratio: 3 / 4; overflow: hidden; background: var(--cream2); }
  .hz-past-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hz-past-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 460px)); gap: 14px; justify-content: center; max-width: 1000px; margin: 44px auto 0; } /* 14.09.2026: ohne Foto-Raster darueber, zwei Schleifen bis 460 px */
  .hz-past-video { aspect-ratio: 16 / 9; overflow: hidden; background: var(--cream2); }
  .hz-past-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hz-past-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 1px dashed rgba(160,120,90,0.45); color: rgba(160,120,90,0.75); }
  .hz-past-empty svg { opacity: 0.7; }
  .hz-past-empty span { font-family: 'Barlow Condensed', sans-serif; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.7; }
  @media (max-width: 768px) {
    .hz-past-grid { grid-template-columns: 1fr; max-width: 420px; }
    .hz-past-videos { grid-template-columns: 1fr; max-width: 420px; }
  }

  /* Responsive für die neuen Bausteine */
  @media (max-width: 1024px) {
    .pillars { padding: 90px 40px; }
    .pillars-grid { grid-template-columns: 1fr; }
    .pillar-card { min-height: 420px; }
    .studio-choice { padding: 70px 40px 90px; }
    .studio-choice-grid { grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
    .gallery-mosaic { column-count: 3; }
    .ak-section-dark, .ak-phasen { padding: 90px 40px; }
    .ak-grid-2 { grid-template-columns: 1fr; }
    .ak-features { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 768px) {
    .nav-logo .nav-logo-sub { font-size: 0.42rem; letter-spacing: 0.34em; margin-top: 4px; }
    .pillars { padding: 60px 24px; }
    .pillar-card { min-height: 380px; padding: 36px 26px; }
    .hero.hero-page { min-height: 48vh; padding: 150px 24px 56px; }
    .studio-choice { padding: 56px 24px 70px; }
    .studio-choice-grid { grid-template-columns: 1fr; gap: 14px; max-width: 480px; }
    .studio-choice-card { aspect-ratio: 4 / 5; }
    .gallery-mosaic { column-count: 2; column-gap: 3px; }
    .gallery-mosaic .gallery-item { margin-bottom: 3px; }
    .ak-section-dark, .ak-phasen { padding: 60px 24px; }
    .ak-features { grid-template-columns: 1fr; }
    .ak-card { padding: 36px 26px; }
  }

/* KONTAKT — mittlere Breiten (Valentin 14.09.2026): Sobald die Überschrift neben dem Portrait nicht mehr
   in die linke Spalte passt (unter ca. 1740 px, z. B. halber Bildschirm), springt die linke Hälfte um:
   Portrait klein und zentriert ÜBER dem Text, Spalten wachsen mit statt intern zu scrollen. */
@media (min-width: 1025px) and (max-width: 1740px) {
  #kontakt-form { max-height: none; }
  #kontakt-form .contact-info { min-height: 0; max-height: none; overflow: visible; padding: 70px 56px 64px; }
  #kontakt-form .contact-form { max-height: none; overflow: visible; }
  #kontakt-form .contact-info-image { position: static; width: 100%; max-width: 170px; height: auto; max-height: none; margin: 0 auto 28px; }
  #kontakt-form .contact-info-image img { width: 100%; height: auto; max-height: none; margin: 0; object-position: center; }
  #kontakt-form .contact-info-text { margin-left: 0; }
}

/* PORTFOLIO-SEITE — FILM-MOSAIK (14.09.2026): ersetzt den leeren Video-Platzhalter über „Wedding".
   Zehn stumme Dauerschleifen in ausgeglichenen Zeilen: main.js verteilt die Clips so auf Zeilen, dass jede Zeile die
   volle Breite füllt; Hoch- und Querformat behalten ihr Seitenverhältnis (--r = Breite/Höhe, flex-grow = --r).
   Die zwei Hochzeitsfilme (.pf-item-open) öffnen per Klick die Großansicht (.pf-lightbox) mit Ton und Credit. */
.portfolio-film-mosaic { margin-top: 50px; display: flex; flex-wrap: wrap; gap: 3px; -webkit-touch-callout: none; user-select: none; }
.pf-row { display: flex; gap: 3px; width: 100%; }
.pf-item { position: relative; flex: var(--r, 1) 1 0%; aspect-ratio: var(--r, 1); min-width: 0; margin: 0; background: var(--dark3); overflow: hidden; }
.pf-item video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-item-open { cursor: pointer; }
.pf-item-open::after { content: ''; position: absolute; inset: 0; background: rgba(23,48,43,0); transition: background 0.3s; }
.pf-item-open:hover::after, .pf-item-open:focus-visible::after { background: rgba(23,48,43,0.28); }
.pf-item-open:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.pf-play {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px;
  background: rgba(23,48,43,0.78); color: var(--gold-light);
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  pointer-events: none; transition: background 0.3s, color 0.3s;
}
.pf-play svg { width: 12px; height: 12px; }
.pf-item-open:hover .pf-play { background: var(--gold); color: var(--dark); }
.pf-lightbox { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; padding: 56px 40px 36px; background: rgba(12,24,21,0.95); }
.pf-lightbox.is-open { display: flex; }
.pf-lightbox-inner { width: fit-content; max-width: 100%; } /* 14.09.2026: passt sich dem Video an, damit auch Hochkant-Clips (Chris) mittig ohne schwarze Ränder stehen */
.pf-lightbox video { display: block; width: auto; height: auto; max-width: min(1400px, calc(100vw - 80px)); max-height: calc(100vh - 160px); background: #000; }
.pf-lightbox-credit { margin: 12px 0 0; text-align: right; color: var(--gray); font-family: 'Barlow', sans-serif; font-size: 0.8rem; letter-spacing: 0.05em; line-height: 1.5; }
.pf-lightbox-close { position: absolute; top: 14px; right: 20px; width: 48px; height: 48px; background: none; border: none; color: var(--gold); font-size: 2.4rem; line-height: 1; cursor: pointer; z-index: 2; }
.pf-lightbox-close:hover { color: var(--gold-light); }
@media (max-width: 768px) {
  .portfolio-film-mosaic { margin-top: 36px; gap: 2px; }
  .pf-row { gap: 2px; }
  .pf-play { left: 10px; bottom: 10px; padding: 7px 10px; font-size: 0.6rem; gap: 7px; }
  .pf-lightbox { padding: 64px 12px 24px; }
  .pf-lightbox video { max-width: calc(100vw - 24px); max-height: calc(100vh - 170px); }
  .pf-lightbox-credit { font-size: 0.7rem; }
}

/* HOCHZEITSSEITE — LEISTUNGEN ALS REDAKTIONELLE ZEILEN (14.09.2026): ersetzt nur auf hochzeitsproduktion.html das
   Drei-Karten-Raster (.leist-grid bleibt für Event- und Personenseite bestehen). Bild und Text im Wechsel links/rechts,
   Serif-Überschrift, feiner Goldrahmen im Bild, Stichworte mit Goldpunkten. Bilder ohne Wasserzeichen (assets/img/seiten/). */
.hz-leist { background: var(--dark2); padding: 80px 60px 90px; } /* 14.09.2026 abends kompakter gemacht (Valentin: alles viel zu gross) */
.hz-leist-head { max-width: 1000px; margin: 0 auto 56px; }
.hz-leist-row { display: grid; grid-template-columns: minmax(0, 380px) 1fr; gap: 0 72px; align-items: center; max-width: 1000px; margin: 0 auto; }
.hz-leist-row + .hz-leist-row { margin-top: 72px; }
.hz-leist-row-flip { grid-template-columns: 1fr minmax(0, 380px); }
.hz-leist-row-flip .hz-leist-media { order: 2; }
.hz-leist-row-flip .hz-leist-text { order: 1; justify-self: end; }
.hz-leist-media { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--dark3); }
.hz-leist-media-wide { aspect-ratio: 3 / 2; }
.hz-leist-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s ease; }
.hz-leist-row:hover .hz-leist-media img { transform: scale(1.04); }
.hz-leist-media::after { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(207,157,123,0.45); pointer-events: none; }
.hz-leist-text { max-width: 440px; }
.hz-leist-kicker { font-family: 'Barlow Condensed', sans-serif; font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.hz-leist-text h3 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.6rem, 2.1vw, 2.1rem); font-weight: 300; line-height: 1.1; color: var(--white); margin: 0 0 16px; }
.hz-leist-text h3::after { content: ''; display: block; width: 36px; height: 1px; background: var(--gold); margin-top: 16px; }
.hz-leist-text p { font-size: 0.93rem; line-height: 1.8; color: rgba(245,242,238,0.62); margin: 0 0 18px; }
.hz-leist-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; font-family: 'Barlow Condensed', sans-serif; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,242,238,0.5); }
.hz-leist-tags li:not(:last-child)::after { content: '·'; color: var(--gold); margin-left: 12px; } /* Punkt bleibt am Zeilenende, nie am Zeilenanfang */
@media (max-width: 1024px) {
  .hz-leist { padding: 64px 40px 72px; }
  .hz-leist-head { margin-bottom: 44px; }
  .hz-leist-row { grid-template-columns: minmax(0, 320px) 1fr; gap: 0 40px; }
  .hz-leist-row-flip { grid-template-columns: 1fr minmax(0, 320px); }
  .hz-leist-row + .hz-leist-row { margin-top: 56px; }
}
@media (max-width: 768px) {
  .hz-leist { padding: 56px 24px 64px; }
  .hz-leist-head { margin-bottom: 40px; }
  .hz-leist-row, .hz-leist-row-flip { grid-template-columns: 1fr; gap: 26px 0; }
  .hz-leist-row-flip .hz-leist-media { order: 0; }
  .hz-leist-row-flip .hz-leist-text { order: 0; justify-self: stretch; }
  .hz-leist-row + .hz-leist-row { margin-top: 56px; }
  .hz-leist-media-wide { aspect-ratio: 4 / 3; }
  .hz-leist-media::after { inset: 12px; }
  .hz-leist-text { max-width: none; }
  .hz-leist-text h3 { font-size: 1.9rem; }
  .hz-leist-text p { font-size: 0.95rem; line-height: 1.75; }
}

/* PERSONEN-SEITE — LEISTUNGEN ALS COLLAGE + LISTE (14.09.2026): ersetzt nur auf menschenfotografie.html das Kartenraster.
   Helle Creme-Sektion; links zwei versetzte Bildspalten (4:5 / 3:4 im Wechsel), rechts Kopf, nummerierte Liste mit
   Serifen-Titeln und feinen Trennlinien sowie Textlink. Handy: Kopf, Collage (zweispaltig, kleiner Versatz), Liste. */
.ps-leist { background: var(--cream2); padding: 100px 60px 110px; }
.ps-leist-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 500px) 1fr; grid-template-areas: "collage head" "collage list" "collage link"; column-gap: 96px; align-items: start; }
.ps-head { grid-area: head; }
.ps-head .section-label { color: var(--brown); }
.ps-head .section-label::after { background: var(--brown); }
.ps-head h2 { color: var(--charcoal); margin-bottom: 36px; }
.ps-head h2 em { color: var(--brown); }
.ps-collage { grid-area: collage; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.ps-collage-col { display: flex; flex-direction: column; gap: 20px; }
.ps-collage-col:nth-child(2) { padding-top: 72px; }
.ps-collage-item { margin: 0; overflow: hidden; background: var(--cream3); }
.ps-ratio-45 { aspect-ratio: 4 / 5; }
.ps-ratio-34 { aspect-ratio: 3 / 4; }
.ps-collage-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s ease; }
.ps-collage-item:hover img { transform: scale(1.04); }
.ps-services { grid-area: list; list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(58,53,52,0.16); }
.ps-services li { display: grid; grid-template-columns: 52px 1fr; column-gap: 12px; padding: 24px 0 26px; border-bottom: 1px solid rgba(58,53,52,0.16); transition: padding-left 0.4s ease; }
.ps-services li:hover { padding-left: 10px; }
.ps-num { font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem; letter-spacing: 0.25em; color: var(--brown); padding-top: 11px; }
.ps-services h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.9rem; font-weight: 300; line-height: 1.1; color: var(--charcoal); margin: 0 0 8px; transition: color 0.3s; }
.ps-services li:hover h3 { color: var(--brown); }
.ps-services p { font-size: 0.92rem; line-height: 1.7; color: rgba(58,53,52,0.62); margin: 0; max-width: 420px; }
.ps-link { grid-area: link; justify-self: start; margin-top: 36px; display: inline-flex; align-items: center; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--brown); font-family: 'Barlow Condensed', sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--charcoal); text-decoration: none; transition: color 0.3s, gap 0.3s; }
.ps-link:hover { color: var(--brown); gap: 18px; }
.ps-leist .reveal-delay-3 { transition-delay: 0.3s; }
@media (max-width: 1024px) {
  .ps-leist { padding: 72px 40px 80px; }
  .ps-leist-inner { grid-template-columns: minmax(0, 380px) 1fr; column-gap: 48px; }
  .ps-collage { gap: 14px; }
  .ps-collage-col { gap: 14px; }
  .ps-collage-col:nth-child(2) { padding-top: 48px; }
  .ps-services h3 { font-size: 1.7rem; }
}
@media (max-width: 768px) {
  /* Handy wie am PC (Valentin 14.09.2026: „genauso wie bei PC, verkleinere es einfach"): Collage links, Kopf + Liste rechts */
  .ps-leist { padding: 44px 20px 52px; }
  .ps-leist-inner { grid-template-columns: minmax(0, 48%) 1fr; column-gap: 16px; }
  .ps-collage { align-self: center; } /* Textspalte ist mobil zwangsläufig höher als die Collage → Collage mittig daneben */
  .ps-head .section-label { font-size: 0.55rem; letter-spacing: 0.25em; gap: 8px; margin-bottom: 10px; }
  .ps-head .section-label::after { width: 22px; }
  .ps-head h2 { font-size: 1.35rem; margin-bottom: 12px; }
  .ps-collage { gap: 8px; }
  .ps-collage-col { gap: 8px; }
  .ps-collage-col:nth-child(2) { padding-top: 26px; }
  .ps-services li { grid-template-columns: 22px 1fr; column-gap: 6px; padding: 9px 0 10px; }
  .ps-services li:hover { padding-left: 0; }
  .ps-num { font-size: 0.5rem; letter-spacing: 0.15em; padding-top: 5px; }
  .ps-services h3 { font-size: 1rem; margin-bottom: 3px; }
  .ps-services p { font-size: 0.64rem; line-height: 1.5; }
  .ps-link { margin-top: 14px; gap: 8px; padding-bottom: 4px; font-size: 0.58rem; letter-spacing: 0.15em; }
  .ps-link svg { width: 11px; height: 11px; }
}

/* PERSONEN-SEITE — IMPRESSIONEN MINIMAL (14.09.2026): vier Bilder in einer ruhigen Reihe statt 16-Bilder-Galerie, darunter der Portfolio-Button */
.ps-teaser { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 1000px; margin: 48px auto 0; }
.ps-teaser figure { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: var(--cream2); }
.ps-teaser img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s ease; }
.ps-teaser figure:hover img { transform: scale(1.04); }
@media (max-width: 768px) {
  .ps-teaser { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 32px; }
}

/* PERSONEN-SEITE — IMPRESSIONEN ALS MOODBOARD (14.09.2026, nach Pinterest-Referenzen): zweifarbiger Grund, vier frei
   platzierte Bilder (Prozentwerte im 2:1-Rahmen, leichte Überlappungen, ragen über die Farbkante), darunter das große
   kursive Serif-Wort, ein Satz und der Button. Handy: Bilder als wischbare Reihe (Scroll-Snap), Wort und Text darunter. */
.ps-mood-section { position: relative; padding: 80px 60px 100px; text-align: center; background: linear-gradient(to bottom, var(--cream3) 0 38%, var(--cream) 38%); overflow: hidden; }
.ps-mood-section .section-label { justify-content: center; color: var(--brown); margin-bottom: 44px; }
.ps-mood-section .section-label::after { display: none; }
.ps-mood { position: relative; max-width: 1200px; margin: 0 auto; aspect-ratio: 2 / 1; }
.ps-mood-item { position: absolute; margin: 0; overflow: hidden; background: var(--cream2); box-shadow: 0 18px 40px rgba(58,53,52,0.10); }
.ps-mood-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s ease; }
.ps-mood-item:hover img { transform: scale(1.04); }
.ps-mood-a { left: 3%; top: 0; width: 27%; aspect-ratio: 3 / 4; z-index: 1; }
.ps-mood-c { left: 26%; top: 22%; width: 18%; aspect-ratio: 3 / 4; z-index: 2; }
.ps-mood-e { left: 52%; top: 2%; width: 27%; aspect-ratio: 3 / 2; z-index: 1; }
.ps-mood-f { left: 73%; top: 34%; width: 22%; aspect-ratio: 3 / 4; z-index: 2; }
.ps-mood-word { position: relative; z-index: 0; margin: -4% 0 0; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: clamp(4.2rem, 12vw, 11rem); line-height: 0.9; letter-spacing: -0.02em; color: var(--charcoal); }
.ps-mood-text { max-width: 520px; margin: 22px auto 0; font-size: 0.92rem; line-height: 1.7; color: rgba(58,53,52,0.62); }
.ps-mood-section .btn-primary { margin-top: 36px; }
@media (max-width: 1024px) {
  .ps-mood-section { padding: 64px 40px 80px; }
}
@media (max-width: 768px) {
  /* Handy wie am PC (Valentin 14.09.2026): dieselbe freie Verteilung im 2:1-Rahmen, nur kleiner; Wort und Text mitskaliert */
  .ps-mood-section { padding: 40px 20px 48px; }
  .ps-mood-section .section-label { font-size: 0.55rem; letter-spacing: 0.25em; margin-bottom: 18px; }
  .ps-mood-item { box-shadow: 0 8px 18px rgba(58,53,52,0.12); }
  .ps-mood-word { margin-top: -4%; font-size: clamp(2.4rem, 12vw, 4rem); }
  .ps-mood-text { margin-top: 10px; font-size: 0.7rem; line-height: 1.55; padding: 0 8px; }
  .ps-mood-section .btn-primary { margin-top: 18px; padding: 11px 22px; font-size: 0.62rem; letter-spacing: 0.16em; gap: 8px; }
  .ps-mood-section .btn-primary svg { width: 12px; height: 12px; }
}

/* STARTSEITE — ÜBER-MICH-PORTRAIT ALS POSTER (14.09.2026, nach Pinterest-Referenzen; Sicherungspunkt Commit 6c561ce):
   riesige angeschnittene Buchstaben VAL / EN / TIN hinter der freigestellten Person, feine Goldrahmenlinie, Akzentring,
   kleine Beschriftungen, vertikale Zeile. Alle Maße in cqw = Prozent der Spaltenbreite → Handy sieht aus wie PC, nur kleiner. */
.about-slideshow-wrap { padding: 0; }
.about-poster { position: relative; width: 100%; height: 100%; min-height: 0; container-type: inline-size; overflow: hidden; background: var(--dark3); } /* PC: füllt die ganze Spalte; Handy: festes Seitenverhältnis (unten) */
.about-poster .about-portrait { position: absolute; left: 0; bottom: 0; width: 92%; height: auto; max-height: 100%; object-fit: contain; object-position: left bottom; z-index: 3; } /* 16.09.2026: auf breiten Bildschirmen (kurze Textspalte) wurde der Kopf oben abgeschnitten → Bild darf nie höher als die Tafel sein, bleibt unten links */
.about-poster-word { position: absolute; inset: 0; z-index: 1; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; line-height: 0.82; letter-spacing: -0.02em; color: rgba(207,157,123,0.17); user-select: none; pointer-events: none; }
.about-poster-word span { position: absolute; font-size: 38cqw; }
.about-poster-word .w1 { top: 3cqw; right: -9cqw; }
.about-poster-word .w2 { top: 50%; left: -5cqw; transform: translateY(-45%); }
.about-poster-word .w3 { bottom: 4cqw; right: -11cqw; }
.about-poster-frame { position: absolute; inset: 6cqw; z-index: 2; border: 1px solid rgba(207,157,123,0.38); pointer-events: none; }
.about-poster-ring { position: absolute; top: 10cqw; right: 10cqw; width: 11cqw; height: 11cqw; z-index: 4; border: 1px solid rgba(207,157,123,0.75); border-radius: 50%; pointer-events: none; }
.about-poster-ring::after { content: ''; position: absolute; left: 50%; top: 50%; width: 2.4cqw; height: 2.4cqw; margin: -1.2cqw 0 0 -1.2cqw; border-radius: 50%; background: var(--gold); }
.about-poster-cap { position: absolute; z-index: 4; font-family: 'Barlow Condensed', sans-serif; font-size: 2.4cqw; letter-spacing: 0.26em; text-transform: uppercase; line-height: 1.7; color: rgba(227,190,158,0.85); pointer-events: none; }
.about-poster-cap-tl { top: 10cqw; left: 10cqw; }
.about-poster-cap-side { right: 8.5cqw; top: 26cqw; writing-mode: vertical-rl; white-space: nowrap; } /* beginnt unter dem Ring, läuft nach unten */
@media (max-width: 1024px) {
  .about-slideshow-wrap { padding: 24px 0 0; }
  .about-poster { height: auto; aspect-ratio: 1 / 1.42; }
  .about-poster .about-portrait { width: 76%; } /* Valentins Vorgabe vom Vormittag bleibt: Portrait links am Rand, 76 % */
}

/* STARTSEITE — LEISTUNGEN ALS VERSETZTE BILDSTREIFEN (14.09.2026, nach der Triptychon-Referenz; ersetzt den Index mit
   Klebebild, Sicherungspunkt des Kartenrasters: Commit fddadc1). Vier hohe Streifen (3:5) nebeneinander, jeder zweite
   72 px tiefer; große konturierte Serif-Nummer über der oberen Bildecke; darunter Serif-Titel, Text, Pillen, Textlink.
   Tablet 2×2, Handy 2×2 in klein (vier Textspalten wären auf dem Handy unlesbar). */
.svc-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; max-width: 1240px; margin: 0 auto; align-items: start; }
.svc-slice { position: relative; padding-top: 46px; }
.svc-slice:nth-child(even) { margin-top: 72px; }
.svc-slice-num { position: absolute; top: 0; left: -4px; z-index: 2; font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 6.4rem; line-height: 0.8; letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 1px rgba(114,75,57,0.8); pointer-events: none; transition: color 0.5s; }
.svc-slice:hover .svc-slice-num { color: var(--brown); }
.svc-slice-media { margin: 0; aspect-ratio: 3 / 5; overflow: hidden; background: var(--cream3); }
.svc-slice-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s ease; }
.svc-slice:hover .svc-slice-media img { transform: scale(1.05); }
.svc-slice h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.75rem; font-weight: 300; line-height: 1.1; color: var(--charcoal); margin: 22px 0 10px; }
.svc-slice h3 a { color: inherit; text-decoration: none; transition: color 0.3s; }
.svc-slice h3 a:hover { color: var(--brown); }
.svc-slice p { font-size: 0.9rem; line-height: 1.7; color: rgba(58,53,52,0.65); margin: 0 0 16px; }
.svc-tags { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.svc-tags li { font-family: 'Barlow Condensed', sans-serif; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--charcoal); padding: 6px 10px; border: 1px solid rgba(58,53,52,0.2); border-radius: 999px; transition: border-color 0.3s; }
.svc-slice:hover .svc-tags li { border-color: rgba(114,75,57,0.45); }
.svc-link { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 5px; border-bottom: 1px solid rgba(114,75,57,0.4); font-family: 'Barlow Condensed', sans-serif; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brown); text-decoration: none; transition: gap 0.3s, color 0.3s; }
.svc-link:hover { gap: 16px; color: var(--charcoal); }
@media (max-width: 1024px) {
  .svc-strip { grid-template-columns: 1fr 1fr; gap: 24px; }
  .svc-slice:nth-child(even) { margin-top: 56px; }
  .svc-slice-num { font-size: 5.4rem; }
}
@media (max-width: 768px) {
  .svc-strip { gap: 14px; }
  .svc-slice { padding-top: 26px; }
  .svc-slice:nth-child(even) { margin-top: 36px; }
  .svc-slice-num { font-size: 3.4rem; left: -2px; }
  .svc-slice h3 { font-size: 1.15rem; margin: 12px 0 6px; }
  .svc-slice p { font-size: 0.68rem; line-height: 1.55; margin-bottom: 10px; }
  .svc-tags { gap: 4px 5px; margin-bottom: 12px; }
  .svc-tags li { font-size: 0.5rem; letter-spacing: 0.12em; padding: 4px 7px; }
  .svc-link { font-size: 0.56rem; letter-spacing: 0.15em; gap: 6px; padding-bottom: 3px; }
  .svc-link svg { width: 10px; height: 10px; }
}

/* STUDIO-SEITE — AUSWAHL ALS GLAS-BÜHNE (14.09.2026, nach Pinterest-Referenzen „blur & glassy"; ersetzt .studio-choice,
   Sicherungspunkt Commit 875b1d8): dunkles Feld, darin die drei Motive als weich verschwommene Farbflächen + Filmkorn;
   darüber drei Milchglas-Paneele mit backdrop-filter, Goldkante, Foto als klares Fenster, konturierter Nummer.
   Handy: gleicher Aufbau (3 Paneele nebeneinander), nur kleiner. */
.sc-glass { position: relative; isolation: isolate; overflow: hidden; background: var(--dark); padding: 100px 60px 120px; }
.sc-glass-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sc-blob { position: absolute; width: 46%; aspect-ratio: 4 / 3; object-fit: cover; filter: blur(70px) saturate(1.25); opacity: 0.55; transform: translateZ(0); }
.sc-blob-1 { left: -8%; top: -10%; }
.sc-blob-2 { left: 30%; top: 32%; width: 40%; opacity: 0.42; }
.sc-blob-3 { right: -10%; top: -6%; width: 44%; }
.sc-grain { position: absolute; inset: 0; opacity: 0.09; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.sc-glass-header { position: relative; z-index: 1; text-align: center; margin-bottom: 64px; }
.sc-glass-header .section-label { justify-content: center; }
.sc-glass-header .section-label::after { display: none; }
.sc-glass-header p { font-size: 0.98rem; line-height: 1.8; color: rgba(245,242,238,0.62); max-width: 620px; margin: 18px auto 0; }
.sc-glass-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1180px; margin: 0 auto; align-items: start; }
.sc-panel { position: relative; display: block; padding: 18px 18px 26px; text-decoration: none; border-radius: 28px; background: linear-gradient(160deg, rgba(255,252,246,0.14), rgba(255,252,246,0.05)); -webkit-backdrop-filter: blur(28px) saturate(1.4); backdrop-filter: blur(28px) saturate(1.4); border: 1px solid rgba(255,252,246,0.16); box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 24px 60px rgba(0,0,0,0.30); transition: transform 0.5s ease, border-color 0.4s, background 0.4s; } /* Apple-Look (Valentin 14.09.2026): runde Ecken, zarte helle Kante, weiche Schatten */
.sc-panel:nth-child(2) { margin-top: -36px; }
.sc-panel:hover { transform: translateY(-6px); border-color: rgba(227,190,158,0.45); background: linear-gradient(160deg, rgba(255,252,246,0.18), rgba(255,252,246,0.07)); }
.sc-panel-media { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 18px; background: var(--dark3); }
.sc-panel-media::after { content: ''; position: absolute; inset: 0; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10); pointer-events: none; } /* weiche Innenkante statt harter Goldlinie */
.sc-panel-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s ease; }
.sc-panel:hover .sc-panel-media img { transform: scale(1.05); }
.sc-panel-num { margin: 22px 0 6px; font-family: 'Cormorant Garamond', serif; font-size: 2.6rem; font-weight: 300; line-height: 1; color: rgba(227,190,158,0.8); transition: color 0.4s; }
.sc-panel:hover .sc-panel-num { color: var(--gold); }
.sc-panel h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; font-weight: 300; line-height: 1.1; color: var(--white); margin: 0 0 10px; }
.sc-panel p { font-size: 0.88rem; line-height: 1.65; color: rgba(245,242,238,0.68); margin: 0 0 18px; }
.sc-panel-link { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-light); background: rgba(255,252,246,0.07); border: 1px solid rgba(255,252,246,0.14); transition: background 0.3s, border-color 0.3s, gap 0.3s; } /* runder Glas-Button statt Unterstrich */
.sc-panel:hover .sc-panel-link { background: rgba(255,252,246,0.12); border-color: rgba(227,190,158,0.45); gap: 16px; }
@media (max-width: 1024px) {
  .sc-glass { padding: 72px 40px 90px; }
  .sc-glass-grid { gap: 16px; }
  .sc-panel { padding: 12px 12px 20px; }
  .sc-panel:nth-child(2) { margin-top: -24px; }
  .sc-panel-num { font-size: 2rem; margin-top: 14px; }
  .sc-panel h3 { font-size: 1.4rem; }
  .sc-panel p { font-size: 0.8rem; }
}
@media (max-width: 768px) {
  .sc-glass { padding: 52px 16px 64px; }
  .sc-glass-header { margin-bottom: 36px; }
  .sc-glass-header p { font-size: 0.85rem; }
  .sc-glass-grid { gap: 8px; }
  .sc-panel { padding: 7px 7px 12px; border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 14px 28px rgba(0,0,0,0.30); }
  .sc-panel-media, .sc-panel-media::after { border-radius: 10px; }
  .sc-panel:nth-child(2) { margin-top: -16px; }
  .sc-panel-num { margin: 10px 0 3px; font-size: 1.4rem; }
  .sc-panel h3 { font-size: 0.82rem; margin-bottom: 5px; }
  .sc-panel p { font-size: 0.56rem; line-height: 1.45; margin-bottom: 9px; }
  .sc-panel-link { font-size: 0.48rem; letter-spacing: 0.14em; gap: 5px; padding: 5px 9px; }
  .sc-panel-link svg { width: 9px; height: 9px; }
  .sc-blob { filter: blur(40px) saturate(1.25); }
}


/* STARTSEITE — ZWEI BEREICHE ALS „KINO-DIPTYCHON" (15.09.2026, Design-Wettbewerb Entwurf A; ersetzt .pillars-grid/.pillar-*,
   deren Regeln oben ungenutzt stehen bleiben; Sicherungspunkt Commit c877bbc) */
/* ============================================================
   Zwei Bereiche – „Kino-Diptychon" (Präfix pl2-)
   Zwei hohe Tafeln mit schräger Trennkante, riesige angeschnittene
   Wörter als Ebene hinter den Inhalten, Filmkorn, kantiges Milchglas.
   Nur transform / opacity / backdrop-filter animiert, nichts pro Frame.
   ============================================================ */
.pillars.pl2 {
  --pl2-skew: 72px;     /* horizontale Versetzung der schrägen Trennkante */
  --pl2-pad: 44px;      /* Innenabstand der Tafeln */
  --pl2-in: 30px;       /* Innenabstand der Glasplatte */
  --pl2-line: rgba(207,157,123,0.28);
  position: relative;
  background: var(--dark);
  padding: 120px 60px 130px;
  overflow: hidden;
}
.pl2-inner { max-width: 1240px; margin: 0 auto; }

/* ---------- Kopf: Label + H2 links, Absatz rechts unten (asymmetrisch) ---------- */
.pl2-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 32px 64px;
  align-items: end;
  margin-bottom: 64px;
}
.pl2-head .section-label { margin-bottom: 22px; }
.pl2-head h2 { font-size: clamp(2.6rem, 6.2vw, 5.4rem); line-height: 0.98; letter-spacing: -0.01em; }
.pl2-head h2 em { color: var(--gold); }
.pl2-head-text {
  font-size: 0.98rem; line-height: 1.8; color: rgba(245,242,238,0.58);
  max-width: 420px; padding-top: 22px; border-top: 1px solid var(--pl2-line);
  justify-self: end; margin-bottom: 0.4em;
}

/* ---------- Bühne: beide Tafeln teilen sich ein Zeilenraster (Subgrid) ---------- */
.pl2-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(210px, 1fr) auto auto auto auto auto;
  min-height: 660px;
}
.pl2-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: subgrid;
  grid-row: 1 / 7;
  padding: 0 var(--pl2-pad);
  text-decoration: none;
  color: var(--white);
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
/* Studio ragt um --pl2-skew in die Akademie hinein; beide werden schräg beschnitten → eine gemeinsame Kante */
.pl2-panel--studio {
  grid-column: 1;
  margin-right: calc(-1 * var(--pl2-skew));
  padding-right: calc(var(--pl2-pad) + var(--pl2-skew));
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--pl2-skew)) 100%, 0 100%);
}
.pl2-panel--akademie {
  grid-column: 2;
  padding-left: calc(var(--pl2-pad) + var(--pl2-skew));
  clip-path: polygon(var(--pl2-skew) 0, 100% 0, 100% 100%, 0 100%);
}

/* ---------- Hintergrund-Ebenen ---------- */
.pl2-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.pl2-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
  filter: brightness(0.6) saturate(0.85) contrast(1.05);
  transform: scale(1.03);
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .7s ease;
}
.pl2-bg--studio::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(23,48,43,0.90) 0%, rgba(23,48,43,0.55) 42%, rgba(23,48,43,0.22) 72%, rgba(23,48,43,0.48) 100%);
}
.pl2-bg--akademie {
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(227,190,158,0.22) 0%, rgba(207,157,123,0.05) 45%, rgba(207,157,123,0) 70%),
    linear-gradient(160deg, #1F3F38 0%, #1A352F 50%, #122522 100%);
}
.pl2-bg--akademie::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(207,157,123,0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(207,157,123,0.075) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0.2));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0.2));
}
.pl2-film {
  position: absolute; top: -40px; bottom: -40px; right: 21%;
  width: 118px; height: calc(100% + 80px);
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}

/* Riesiges, angeschnittenes Wort als Ebene hinter dem Inhalt */
.pl2-word {
  position: absolute; z-index: 1; top: 62px; left: calc(var(--pl2-pad) - 0.07em);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: clamp(3rem, 8.2vw, 8rem); line-height: 0.82; letter-spacing: -0.012em; /* 15.09.2026: kleiner, damit AKADEMIE komplett in die Tafel passt (Breite ≈ 3,5 × Schriftgröße) */
  text-transform: uppercase; white-space: nowrap;
  color: rgba(207,157,123,0.055);
  -webkit-text-stroke: 1px rgba(207,157,123,0.36);
  pointer-events: none; user-select: none; -webkit-user-select: none;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1), color .7s ease, -webkit-text-stroke-color .7s ease;
}
.pl2-panel--akademie .pl2-word { left: calc(var(--pl2-pad) + var(--pl2-skew) - 0.07em); right: auto; } /* beide Wörter gleich groß und am linken Inhaltsrand → symmetrisch */

/* Filmkorn (statische SVG-Kachel, wird einmal gerastert) */
.pl2-grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.14;
  mix-blend-mode: overlay;
}

/* Index oben (01 / 02) */
.pl2-index {
  position: absolute; z-index: 3; top: 30px; left: var(--pl2-pad);
  display: flex; align-items: center; gap: 14px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 500; font-size: 0.74rem; letter-spacing: 0.32em;
  color: var(--gold);
}
.pl2-index::after { content: ''; width: 34px; height: 1px; background: var(--gold); opacity: 0.7; }
.pl2-panel--akademie .pl2-index { left: auto; right: var(--pl2-pad); flex-direction: row-reverse; }

/* ---------- Kantige Glasplatte (liegt exakt unter Zeile 2–6 des Rasters) ---------- */
.pl2-glass {
  grid-row: 2 / 7; grid-column: 1;
  position: relative; z-index: 2;
  margin-bottom: var(--pl2-pad);
  background: rgba(19,38,34,0.42);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid rgba(207,157,123,0.22);
  transition: border-color .5s ease, background-color .5s ease;
}
.pl2-glass::before, .pl2-glass::after {
  content: ''; position: absolute; width: 26px; height: 26px;
  transition: width .5s cubic-bezier(.2,.7,.2,1), height .5s cubic-bezier(.2,.7,.2,1);
}
.pl2-glass::before { top: -1px; left: -1px; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.pl2-glass::after  { bottom: -1px; right: -1px; border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold); }

/* ---------- Inhalt (Zeilen 2–6, links und rechts auf gleicher Höhe) ---------- */
.pl2-kicker, .pl2-title, .pl2-text, .pl2-tags, .pl2-cta { position: relative; z-index: 3; grid-column: 1; }
.pl2-kicker {
  grid-row: 2; margin: 0 var(--pl2-in); padding-top: 32px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold);
}
.pl2-title {
  grid-row: 3; margin: 12px var(--pl2-in) 0;
  font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(1.6rem, 3.1vw, 2.75rem); line-height: 1.05; color: var(--white);
}
.pl2-title em { font-style: italic; color: var(--gold); }
.pl2-text { grid-row: 4; margin: 16px var(--pl2-in) 0; font-size: 0.92rem; line-height: 1.7; color: rgba(245,242,238,0.68); max-width: 440px; }
.pl2-tags { grid-row: 5; margin: 22px var(--pl2-in) 0; display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; padding: 0; }
.pl2-tags li {
  display: flex; align-items: center;
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245,242,238,0.72);
}
.pl2-tags li::before { content: ''; width: 7px; height: 1px; background: var(--gold); opacity: 0.8; margin-right: 8px; }
.pl2-cta {
  grid-row: 6; justify-self: start;
  margin: 26px var(--pl2-in) calc(var(--pl2-pad) + 30px);
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 500; font-size: 0.76rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
}
.pl2-cta::before { content: ''; width: 32px; height: 1px; background: var(--gold); transition: width .5s cubic-bezier(.2,.7,.2,1); }
.pl2-cta svg { flex: none; transition: transform .5s cubic-bezier(.2,.7,.2,1); }

/* ---------- Trennkante + Schnittmarken ---------- */
.pl2-seam {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(to bottom, rgba(207,157,123,0.1), var(--gold) 35%, var(--gold-light) 65%, rgba(207,157,123,0.1));
  clip-path: polygon(calc(50% + var(--pl2-skew)) 0, calc(50% + var(--pl2-skew) + 1.5px) 0, calc(50% + 1.5px) 100%, 50% 100%);
  opacity: 0.8;
  transition: opacity .5s ease;
}
.pl2-corner { position: absolute; z-index: 4; width: 16px; height: 16px; border: 0 solid rgba(207,157,123,0.6); pointer-events: none; }
.pl2-corner--tl { top: -13px; left: -13px; border-top-width: 1px; border-left-width: 1px; }
.pl2-corner--tr { top: -13px; right: -13px; border-top-width: 1px; border-right-width: 1px; }
.pl2-corner--bl { bottom: -13px; left: -13px; border-bottom-width: 1px; border-left-width: 1px; }
.pl2-corner--br { bottom: -13px; right: -13px; border-bottom-width: 1px; border-right-width: 1px; }

/* ---------- Hover (nur Zeiger-Geräte; Touch bekommt den fertigen Ruhezustand) ---------- */
@media (hover: hover) {
  .pl2-panel:hover .pl2-word { transform: translate3d(-1.5%, -4%, 0); color: rgba(207,157,123,0.10); -webkit-text-stroke-color: rgba(207,157,123,0.58); }
  .pl2-panel--akademie:hover .pl2-word { transform: translate3d(1.5%, -4%, 0); }
  .pl2-panel:hover .pl2-bg img { transform: scale(1.08) translate3d(0, -1.2%, 0); filter: brightness(0.7) saturate(1) contrast(1.05); }
  .pl2-panel:hover .pl2-film { transform: translate3d(0, -20px, 0); }
  .pl2-panel:hover .pl2-glass { border-color: rgba(207,157,123,0.5); background-color: rgba(19,38,34,0.52); }
  .pl2-panel:hover .pl2-glass::before, .pl2-panel:hover .pl2-glass::after { width: 46px; height: 46px; }
  .pl2-panel:hover .pl2-cta::before { width: 56px; }
  .pl2-panel:hover .pl2-cta svg { transform: translateX(4px); }
  .pl2-stage:has(.pl2-panel:hover) .pl2-seam { opacity: 1; }
}
.pl2-panel:focus-visible { outline: none; }
.pl2-panel:focus-visible .pl2-glass { border-color: var(--gold); }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .pillars.pl2 { --pl2-skew: 48px; --pl2-pad: 28px; --pl2-in: 20px; padding: 90px 40px 100px; }
  .pl2-head { gap: 24px 40px; margin-bottom: 48px; }
  .pl2-head-text { font-size: 0.88rem; padding-top: 16px; }
  .pl2-stage { min-height: 540px; grid-template-rows: minmax(160px, 1fr) auto auto auto auto auto; }
  .pl2-word { top: 50px; }
  .pl2-index { top: 22px; font-size: 0.64rem; }
  .pl2-index::after { width: 24px; }
  .pl2-kicker { padding-top: 22px; font-size: 0.6rem; letter-spacing: 0.24em; }
  .pl2-title { font-size: clamp(1.4rem, 2.9vw, 2.2rem); margin-top: 10px; }
  .pl2-text { font-size: 0.82rem; line-height: 1.6; margin-top: 12px; }
  .pl2-tags { margin-top: 16px; gap: 6px 16px; }
  .pl2-tags li { font-size: 0.58rem; letter-spacing: 0.16em; }
  .pl2-cta { margin: 20px var(--pl2-in) calc(var(--pl2-pad) + 22px); font-size: 0.68rem; }
  .pl2-glass::before, .pl2-glass::after { width: 20px; height: 20px; }
  .pl2-film { right: 16%; width: 96px; }
}

/* ---------- Handy: genauso wie am PC, nur verkleinert (beide Tafeln bleiben nebeneinander) ---------- */
@media (max-width: 768px) {
  .pillars.pl2 { --pl2-skew: 22px; --pl2-pad: 14px; --pl2-in: 12px; padding: 64px 16px 76px; }
  .pl2-head { grid-template-columns: 1fr; gap: 18px; align-items: start; margin-bottom: 34px; }
  .pl2-head .section-label { margin-bottom: 14px; }
  .pl2-head h2 { font-size: clamp(2.1rem, 9.5vw, 2.9rem); }
  .pl2-head-text { justify-self: start; font-size: 0.8rem; line-height: 1.65; padding-top: 14px; max-width: 100%; margin-bottom: 0; }
  .pl2-stage { min-height: 0; grid-template-rows: minmax(118px, 1fr) auto auto auto auto auto; }
  .pl2-word { top: 40px; font-size: clamp(1.8rem, 9vw, 2.6rem); -webkit-text-stroke-width: 0.6px; }
  .pl2-panel--studio .pl2-word { left: calc(var(--pl2-pad) - 0.18em); }
  .pl2-panel--akademie .pl2-word { left: calc(var(--pl2-pad) + var(--pl2-skew) - 0.18em); }
  .pl2-index { top: 14px; gap: 8px; font-size: 0.52rem; letter-spacing: 0.24em; }
  .pl2-index::after { width: 16px; }
  .pl2-film { right: 12%; width: 56px; }
  .pl2-glass::before, .pl2-glass::after { width: 14px; height: 14px; }
  .pl2-kicker { padding-top: 14px; font-size: 0.5rem; letter-spacing: 0.18em; }
  .pl2-title { font-size: 1.14rem; margin-top: 7px; }
  .pl2-text { font-size: 0.66rem; line-height: 1.55; margin-top: 9px; }
  .pl2-tags { margin-top: 11px; gap: 4px 10px; }
  .pl2-tags li { font-size: 0.5rem; letter-spacing: 0.12em; }
  .pl2-tags li::before { width: 5px; margin-right: 5px; }
  .pl2-cta { margin: 13px var(--pl2-in) calc(var(--pl2-pad) + 14px); gap: 7px; font-size: 0.54rem; letter-spacing: 0.16em; }
  .pl2-cta::before { width: 16px; }
  .pl2-cta svg { width: 10px; height: 10px; }
  .pl2-corner { width: 10px; height: 10px; }
  .pl2-corner--tl { top: -8px; left: -8px; }
  .pl2-corner--tr { top: -8px; right: -8px; }
  .pl2-corner--bl { bottom: -8px; left: -8px; }
  .pl2-corner--br { bottom: -8px; right: -8px; }
}

/* HOCHZEITSSEITE — VERSPRECHEN & ABLAUF HELL (15.09.2026, Valentin: „ab dem Teil wieder helle Farben für den Hintergrund",
   Ablauf „schmaler und schöner"): Versprechen auf Creme mit Creme2-Karten, Ablauf auf Creme2 als schmale Zeitleiste
   (720 px) mit kursiven Serif-Nummern, feiner Linie, Goldpunkt und Serif-Titeln statt Versalien. */
.ak-section-dark.hz-versprechen { background: var(--cream); }
.hz-versprechen .section-label { color: var(--brown); }
.hz-versprechen .section-label::after { background: var(--brown); }
.hz-versprechen h2 { color: var(--charcoal); }
.hz-versprechen h2 em { color: var(--brown); }
.ak-section-dark.hz-versprechen .ak-card { background: var(--cream2); border-top-color: var(--brown); }
.ak-section-dark.hz-versprechen .ak-card:hover { background: var(--cream3); }
.hz-versprechen .ak-num { color: rgba(114,75,57,0.3); }
.hz-versprechen .ak-card h3 { color: var(--charcoal); }
.hz-versprechen .ak-card p { color: rgba(58,53,52,0.66); }

.ak-phasen.hz-ablauf { background: var(--cream2); padding: 100px 60px 110px; }
.hz-ablauf .section-label { color: var(--brown); justify-content: center; }
.hz-ablauf .section-label::after { display: none; }
.hz-ablauf h2 { color: var(--charcoal); text-align: center; }
.hz-ablauf h2 em { color: var(--brown); }
.hz-ablauf .ak-phasen-grid { max-width: 720px; margin: 56px auto 0; }
.hz-ablauf .process-step { position: relative; display: grid; grid-template-columns: 64px 1fr; column-gap: 32px; align-items: start; padding: 30px 0 32px; border-bottom: 1px solid rgba(58,53,52,0.12); }
.hz-ablauf .process-step::before { content: ''; position: absolute; left: 80px; top: 0; bottom: 0; width: 1px; background: rgba(114,75,57,0.18); }
.hz-ablauf .process-step:first-child::before { top: 34px; }
.hz-ablauf .process-step:last-child { border-bottom: none; }
.hz-ablauf .process-step:last-child::before { bottom: auto; height: 42px; }
.hz-ablauf .process-step:hover { padding-left: 0; }
.hz-ablauf .step-num { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 2.3rem; font-weight: 300; line-height: 1; color: var(--brown); min-width: 0; padding-top: 2px; }
.hz-ablauf .step-content { position: relative; }
.hz-ablauf .step-content::before { content: ''; position: absolute; left: -19.5px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--cream2); }
.hz-ablauf .step-content h4 { font-family: 'Cormorant Garamond', serif; font-size: 1.55rem; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.15; color: var(--charcoal); margin-bottom: 8px; }
.hz-ablauf .step-content p { font-size: 0.95rem; line-height: 1.75; color: rgba(58,53,52,0.68); max-width: 560px; }
.hz-ablauf .ak-note { max-width: 620px; margin-top: 44px; color: rgba(58,53,52,0.55); }
@media (max-width: 768px) {
  .ak-phasen.hz-ablauf { padding: 60px 24px 70px; }
  .hz-ablauf .ak-phasen-grid { margin-top: 36px; }
  .hz-ablauf .process-step { grid-template-columns: 44px 1fr; column-gap: 18px; padding: 20px 0 22px; }
  .hz-ablauf .process-step::before { left: 53px; }
  .hz-ablauf .process-step:first-child::before { top: 26px; }
  .hz-ablauf .step-num { font-size: 1.7rem; }
  .hz-ablauf .step-content::before { left: -12.5px; top: 8px; }
  .hz-ablauf .step-content h4 { font-size: 1.25rem; }
  .hz-ablauf .step-content p { font-size: 0.9rem; line-height: 1.65; }
  .hz-ablauf .ak-note { margin-top: 32px; font-size: 0.8rem; }
}

/* EVENT-SEITE — LEISTUNGEN ALS „LINE-UP" (15.09.2026, Valentin: Event-Seite wie die zwei anderen Studio-Teile fertigstellen,
   mit seinen sieben Bildern): eigenes Muster nur für eventbegleitung.html — dunkle Sektion, vier Zeilen wie ein Programm:
   links große kursive Serif-Nummer in Gold, Mitte Serif-Titel + Text + Stichworte, rechts rundes Bild (Apple-Look, 18 px,
   weicher Schatten; Zeile 03 mit Querformat). Kopf zweispaltig (Titel links, kurzer Lead rechts). Handy: gleiches Raster, kleiner. */
.ev-leist { background: var(--dark); padding: 90px 60px 100px; }
.ev-leist-inner { max-width: 1100px; margin: 0 auto; }
.ev-leist-head { display: grid; grid-template-columns: 1fr minmax(0, 360px); column-gap: 60px; align-items: end; margin-bottom: 48px; }
.ev-leist-head h2 { margin-bottom: 0; }
.ev-leist-lead { font-size: 0.98rem; line-height: 1.75; color: rgba(245,242,238,0.58); margin: 0 0 10px; }
.ev-lineup { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(245,242,238,0.14); }
.ev-act { display: grid; grid-template-columns: 120px 1fr minmax(0, 260px); column-gap: 40px; align-items: center; padding: 40px 0; border-bottom: 1px solid rgba(245,242,238,0.14); }
.ev-act-wide { grid-template-columns: 120px 1fr minmax(0, 320px); }
.ev-act-num { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: 4.2rem; line-height: 1; color: var(--gold); opacity: 0.72; align-self: start; padding-top: 4px; transition: opacity 0.4s ease, transform 0.4s ease; }
.ev-act:hover .ev-act-num { opacity: 1; transform: translateX(6px); }
.ev-act-body { max-width: 520px; }
.ev-act h3 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.8rem, 2.4vw, 2.5rem); font-weight: 300; line-height: 1.08; color: var(--white); margin: 0 0 14px; transition: color 0.3s; }
.ev-act:hover h3 { color: var(--gold-light); }
.ev-act p { font-size: 0.94rem; line-height: 1.8; color: rgba(245,242,238,0.6); margin: 0 0 16px; }
.ev-act-meta { font-family: 'Barlow Condensed', sans-serif; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(245,242,238,0.45); display: flex; flex-wrap: wrap; }
.ev-act-meta span + span::before { content: '·'; color: var(--gold); margin: 0 10px; }
.ev-act-media { margin: 0; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 18px; background: var(--dark3); box-shadow: 0 24px 50px rgba(0,0,0,0.35); justify-self: end; }
.ev-act-media-wide { aspect-ratio: 4 / 3; }
.ev-act-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s ease; }
.ev-act:hover .ev-act-media img { transform: scale(1.05); }
.ev-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 40px; padding-bottom: 6px; border-bottom: 1px solid var(--gold); font-family: 'Barlow Condensed', sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white); text-decoration: none; transition: color 0.3s, gap 0.3s; }
.ev-link:hover { color: var(--gold); gap: 18px; }
@media (max-width: 1024px) {
  .ev-leist { padding: 64px 40px 72px; }
  .ev-leist-head { grid-template-columns: 1fr; row-gap: 18px; margin-bottom: 36px; }
  .ev-leist-lead { max-width: 520px; margin-bottom: 0; }
  .ev-act { grid-template-columns: 84px 1fr minmax(0, 210px); column-gap: 28px; padding: 32px 0; }
  .ev-act-wide { grid-template-columns: 84px 1fr minmax(0, 250px); }
  .ev-act-num { font-size: 3.2rem; }
}
@media (max-width: 768px) {
  /* Handy = PC, nur kleiner (Mobil-Linie 14.09.2026): Nummer, Text und Bild bleiben nebeneinander */
  .ev-leist { padding: 48px 20px 56px; }
  .ev-leist-head { row-gap: 10px; margin-bottom: 22px; }
  .ev-leist-head .section-label { font-size: 0.55rem; letter-spacing: 0.25em; gap: 8px; margin-bottom: 10px; }
  .ev-leist-head .section-label::after { width: 22px; }
  .ev-leist-head h2 { font-size: 1.5rem; }
  .ev-leist-lead { font-size: 0.72rem; line-height: 1.55; }
  .ev-act, .ev-act-wide { grid-template-columns: 30px 1fr 31%; column-gap: 12px; padding: 16px 0; }
  .ev-act-num { font-size: 1.5rem; padding-top: 2px; }
  .ev-act:hover .ev-act-num { transform: none; }
  .ev-act h3 { font-size: 1.1rem; margin-bottom: 5px; }
  .ev-act p { font-size: 0.66rem; line-height: 1.5; margin-bottom: 7px; }
  .ev-act-meta { font-size: 0.48rem; letter-spacing: 0.14em; }
  .ev-act-meta span + span::before { margin: 0 5px; }
  .ev-act-media { border-radius: 10px; box-shadow: 0 10px 22px rgba(0,0,0,0.3); }
  .ev-link { margin-top: 20px; gap: 8px; padding-bottom: 4px; font-size: 0.58rem; letter-spacing: 0.15em; }
  .ev-link svg { width: 11px; height: 11px; }
}

/* EVENT-SEITE — IMPRESSIONEN ALS MOODBOARD „ENERGIE" (15.09.2026): Variante des Moodboard-Musters der Personen-Seite —
   zweifarbiger Grund (cream3/cream ab 42 %), drei Bilder frei im 2:1-Rahmen (Clown hoch, zwei Querformate versetzt,
   Mischpult überlappt das Wort), das große kursive Wort liegt HINTER den Bildern unten links. Handy: dieselbe Verteilung, kleiner.
   Ergänzt 15.09.2026: zwei stumme 9:16-Schleifen (Aftermovie, Goldkind) als Rahmen-Elemente, Wort jetzt ganz links unten. */
.ev-mood-section { position: relative; padding: 80px 60px 100px; text-align: center; background: linear-gradient(to bottom, var(--cream3) 0 42%, var(--cream) 42%); overflow: hidden; }
.ev-mood-section .section-label { justify-content: center; color: var(--brown); margin-bottom: 44px; }
.ev-mood-section .section-label::after { display: none; }
.ev-mood-section { --ev-word: clamp(4rem, 13vw, 12rem); } /* 15.09.2026 spät: Wortgröße als Variable, damit der Textabstand mitwächst */
.ev-mood { position: relative; max-width: 1200px; margin: 0 auto; aspect-ratio: 2 / 1; }
.ev-mood-item { position: absolute; margin: 0; overflow: hidden; border-radius: 8px; background: var(--cream2); box-shadow: 0 18px 40px rgba(58,53,52,0.12); }
.ev-mood-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s ease; }
.ev-mood-item:hover img { transform: scale(1.04); }
.ev-mood-a { left: 2%; top: 0; width: 22%; aspect-ratio: 3 / 4; z-index: 2; }
.ev-mood-b { left: 42%; top: 4%; width: 32%; aspect-ratio: 3 / 2; z-index: 1; }
.ev-mood-c { left: 64%; top: 40%; width: 32%; aspect-ratio: 3 / 2; z-index: 2; }
/* 15.09.2026: zwei Hochkant-Schleifen (9:16) im Rahmen — links neben dem Clown, rechts oben; liegen über den Fotos */
.ev-mood-v1 { left: 25%; top: 16%; width: 15%; aspect-ratio: 9 / 16; z-index: 3; }
.ev-mood-v2 { left: 81%; top: 0; width: 15%; aspect-ratio: 9 / 16; z-index: 3; }
.ev-mood-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-mood-word { position: absolute; left: 2%; bottom: -3%; z-index: 0; margin: 0; white-space: nowrap; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: var(--ev-word); line-height: 0.85; letter-spacing: -0.02em; color: var(--charcoal); }
.ev-mood-text { max-width: 520px; margin: calc(36px + var(--ev-word) * 0.32) auto 0; font-size: 0.92rem; line-height: 1.7; color: rgba(58,53,52,0.62); } /* Abstand = Grundabstand + Unterlänge des „g" (Valentin 15.09.2026: Schriften überschnitten sich in der Großansicht) */
.ev-mood-section .btn-primary { margin-top: 36px; }
@media (max-width: 1024px) {
  .ev-mood-section { padding: 64px 40px 80px; }
}
@media (max-width: 768px) {
  .ev-mood-section { padding: 40px 20px 48px; }
  .ev-mood-section .section-label { font-size: 0.55rem; letter-spacing: 0.25em; margin-bottom: 18px; }
  .ev-mood-item { border-radius: 4px; box-shadow: 0 8px 18px rgba(58,53,52,0.12); }
  .ev-mood-section { --ev-word: clamp(2.4rem, 13vw, 4.2rem); }
  .ev-mood-text { margin-top: calc(14px + var(--ev-word) * 0.32); font-size: 0.7rem; line-height: 1.55; padding: 0 8px; }
  .ev-mood-section .btn-primary { margin-top: 18px; padding: 11px 22px; font-size: 0.62rem; letter-spacing: 0.16em; gap: 8px; }
  .ev-mood-section .btn-primary svg { width: 12px; height: 12px; }
}

/* ÜBER-MICH — ZWEI BEREICHE + VERLÄSSLICHKEIT (15.09.2026): helle Sektion nach der Story, zwei runde Karten im Apple-Look
   (Studio / Akademie, verlinkt) und eine Vertrauensliste mit Goldpunkten. Handy: gleiches Raster, kleiner. */
.about-bereiche { background: var(--cream2); padding: 90px 60px 100px; }
.about-bereiche-inner { max-width: 970px; margin: 0 auto; }
.about-bereiche .section-label { color: var(--brown); }
.about-bereiche .section-label::after { background: var(--brown); }
.about-bereiche h2 { color: var(--charcoal); margin-bottom: 40px; }
.about-bereiche h2 em { color: var(--brown); }
.about-bereiche-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.about-bereich { display: flex; flex-direction: column; background: var(--cream); border: 1px solid rgba(114,75,57,0.14); border-radius: 22px; padding: 34px 32px 30px; text-decoration: none; color: inherit; box-shadow: 0 14px 34px rgba(58,53,52,0.06); transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.3s; }
.about-bereich:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(58,53,52,0.10); border-color: rgba(114,75,57,0.3); }
.about-bereich-kicker { font-family: 'Barlow Condensed', sans-serif; font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--brown); margin-bottom: 14px; }
.about-bereich h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.7rem; font-weight: 400; line-height: 1.15; color: var(--charcoal); margin: 0 0 12px; }
.about-bereich p { font-size: 0.93rem; line-height: 1.75; color: rgba(58,53,52,0.68); margin: 0 0 22px; flex: 1; }
.about-bereich-link { display: inline-flex; align-items: center; gap: 10px; font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--charcoal); transition: gap 0.3s, color 0.3s; }
.about-bereich:hover .about-bereich-link { gap: 16px; color: var(--brown); }
.about-trust { margin-top: 44px; padding-top: 36px; border-top: 1px solid rgba(58,53,52,0.14); }
.about-trust-label { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 400; color: var(--charcoal); margin-bottom: 18px; }
.about-trust-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 32px; }
.about-trust-list li { position: relative; padding-left: 20px; font-size: 0.92rem; line-height: 1.6; color: rgba(58,53,52,0.7); }
.about-trust-list li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
@media (max-width: 768px) {
  .about-bereiche { padding: 48px 20px 56px; }
  .about-bereiche .section-label { font-size: 0.55rem; letter-spacing: 0.25em; gap: 8px; margin-bottom: 10px; }
  .about-bereiche .section-label::after { width: 22px; }
  .about-bereiche h2 { font-size: 1.5rem; margin-bottom: 20px; }
  .about-bereiche-grid { gap: 10px; }
  .about-bereich { border-radius: 14px; padding: 16px 14px 14px; }
  .about-bereich-kicker { font-size: 0.5rem; letter-spacing: 0.2em; margin-bottom: 8px; }
  .about-bereich h3 { font-size: 1.05rem; margin-bottom: 8px; }
  .about-bereich p { font-size: 0.66rem; line-height: 1.55; margin-bottom: 12px; }
  .about-bereich-link { font-size: 0.55rem; letter-spacing: 0.15em; gap: 6px; }
  .about-bereich-link svg { width: 10px; height: 10px; }
  .about-trust { margin-top: 24px; padding-top: 20px; }
  .about-trust-label { font-size: 1.1rem; margin-bottom: 10px; }
  .about-trust-list { gap: 6px 14px; }
  .about-trust-list li { padding-left: 13px; font-size: 0.66rem; line-height: 1.5; }
  .about-trust-list li::before { width: 5px; height: 5px; top: 0.55em; }
}

/* HANDY = PC, NUR KLEINER — HOCHZEITSSEITE & AKADEMIE (15.09.2026, Valentin: „die mobile Ansicht fehlt noch komplett"):
   Leistungszeilen der Hochzeitsseite bleiben Bild/Text nebeneinander (Bild 38 %), Versprechen/Wirkungen zweispaltig,
   Akademie-Merkmale 2×2, die zwei Hochzeits-Schleifen nebeneinander. Überschreibt die früheren Stapel-Regeln. */
@media (max-width: 768px) {
  .hz-leist { padding: 48px 20px 56px; }
  .hz-leist-head { margin-bottom: 26px; }
  .hz-leist-head .section-label { font-size: 0.55rem; letter-spacing: 0.25em; gap: 8px; margin-bottom: 10px; }
  .hz-leist-head .section-label::after { width: 22px; }
  .hz-leist-head h2 { font-size: 1.5rem; }
  .hz-leist-row { grid-template-columns: minmax(0, 38%) 1fr; gap: 0 14px; align-items: center; }
  .hz-leist-row-flip { grid-template-columns: 1fr minmax(0, 38%); }
  .hz-leist-row-flip .hz-leist-media { order: 2; }
  .hz-leist-row-flip .hz-leist-text { order: 1; justify-self: end; }
  .hz-leist-row + .hz-leist-row { margin-top: 26px; }
  .hz-leist-media::after { inset: 6px; }
  .hz-leist-kicker { font-size: 0.5rem; letter-spacing: 0.2em; margin-bottom: 7px; }
  .hz-leist-text h3 { font-size: 1.1rem; margin-bottom: 7px; }
  .hz-leist-text h3::after { width: 22px; margin-top: 7px; }
  .hz-leist-text p { font-size: 0.66rem; line-height: 1.55; margin-bottom: 8px; }
  .hz-leist-tags { font-size: 0.48rem; letter-spacing: 0.12em; gap: 4px 6px; }
  .hz-leist-tags li:not(:last-child)::after { margin-left: 6px; }
  .ak-section-dark, .ak-phasen { padding: 48px 20px 56px; }
  .ak-section-dark .section-label, .ak-phasen .section-label { font-size: 0.55rem; letter-spacing: 0.25em; gap: 8px; margin-bottom: 10px; }
  .ak-section-dark .section-label::after { width: 22px; }
  .ak-section-dark h2, .ak-phasen h2 { font-size: 1.5rem; }
  .ak-grid-2 { grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 24px; }
  .ak-card { padding: 18px 14px 20px; }
  .ak-card:hover { transform: none; }
  .ak-num { font-size: 1.5rem; margin-bottom: 8px; }
  .ak-card h3 { font-size: 0.62rem; letter-spacing: 0.1em; margin-bottom: 7px; }
  .ak-card p { font-size: 0.64rem; line-height: 1.55; }
  .ak-features { grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 24px; }
  .ak-feature { padding: 16px 12px; }
  .ak-feature svg { width: 18px; height: 18px; margin-bottom: 8px; }
  .ak-feature h4 { font-size: 0.55rem; letter-spacing: 0.12em; margin-bottom: 6px; }
  .ak-feature p { font-size: 0.62rem; line-height: 1.5; }
  .ak-note { margin-top: 24px; font-size: 0.66rem; line-height: 1.6; }
  .hz-past-videos { grid-template-columns: 1fr 1fr; gap: 8px; max-width: none; margin-top: 20px; }
  .hz-past-sub { font-size: 0.72rem; margin-top: 10px; }
}

/* DRUCKSCHUTZ (15.09.2026): Bilder und Videos werden beim Drucken/„Als PDF sichern" nicht ausgegeben. */
@media print {
  img, video, .hero-bg { visibility: hidden !important; }
  body::before { content: 'Fotos und Videos auf promoflicks.de sind urheberrechtlich geschützt und werden nicht gedruckt.'; display: block; padding: 20px; font-family: sans-serif; font-size: 12pt; }
}


/* COOKIE-BANNER (16.09.2026): erscheint nur, wenn in main.js eine Meta-/Google-ID steht und noch keine Wahl gespeichert ist. Apple-Look. */
[hidden] { display: none !important; }
.pf-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; padding: 16px; display: flex; justify-content: center; pointer-events: none; }
.pf-consent-box { pointer-events: auto; width: 100%; max-width: 560px; background: var(--cream); color: var(--charcoal); border-radius: 20px; padding: 22px 24px 20px; box-shadow: 0 24px 60px rgba(0,0,0,0.35); border: 1px solid rgba(114,75,57,0.16); }
.pf-consent-title { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; line-height: 1.1; margin-bottom: 8px; }
.pf-consent p { font-size: 0.88rem; line-height: 1.6; color: rgba(58,53,52,0.75); margin: 0 0 16px; }
.pf-consent p a { color: var(--brown); text-decoration: underline; }
.pf-consent-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pf-consent-btn { cursor: pointer; border: 1px solid var(--gold); border-radius: 999px; padding: 11px 20px; font-family: 'Barlow Condensed', sans-serif; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; background: transparent; color: var(--charcoal); transition: background 0.3s, color 0.3s; }
.pf-consent-accept { background: var(--gold); color: var(--dark); }
.pf-consent-accept:hover { background: var(--gold-light); }
.pf-consent-decline:hover { background: rgba(114,75,57,0.08); }
@media (max-width: 768px) {
  .pf-consent { padding: 10px; }
  .pf-consent-box { padding: 18px 18px 16px; border-radius: 16px; }
  .pf-consent-title { font-size: 1.3rem; }
  .pf-consent p { font-size: 0.8rem; }
  .pf-consent-btn { flex: 1; text-align: center; padding: 11px 12px; }
}

/* LINK-SEITE FÜR INSTAGRAM & CO. (16.09.2026, links.html → /links): eine Karte mit Logo, Wortmarke, runden Glas-Buttons,
   Social-Icons und gut sichtbarem Impressum/Datenschutz — die „Zwischenseite" hinter dem Link in der Bio (Impressumspflicht). */
.links-body { background: radial-gradient(90% 70% at 50% 0%, rgba(207,157,123,0.16) 0%, rgba(207,157,123,0) 60%), var(--dark); min-height: 100vh; }
.links-page { min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; padding: 56px 20px 40px; }
.links-card { width: 100%; max-width: 440px; text-align: center; }
.links-logo { display: inline-block; margin-bottom: 14px; }
.links-logo img { width: 92px; height: auto; display: block; }
.links-name { font-family: 'Cormorant Garamond', serif; font-size: 2.3rem; font-weight: 400; line-height: 1; color: var(--white); }
.links-name span { color: var(--gold); }
.links-sub { margin-top: 8px; font-family: 'Barlow Condensed', sans-serif; font-size: 0.66rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); }
.links-tag { margin: 16px auto 28px; max-width: 360px; font-size: 0.95rem; line-height: 1.7; color: rgba(245,242,238,0.62); }
.links-list { display: grid; gap: 10px; }
.links-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-radius: 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(207,157,123,0.28); color: var(--white); text-decoration: none; font-family: 'Barlow Condensed', sans-serif; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background 0.3s, border-color 0.3s, transform 0.3s; }
.links-btn svg { flex: none; opacity: 0.7; transition: transform 0.3s; }
.links-btn:hover { background: rgba(255,255,255,0.09); border-color: rgba(207,157,123,0.6); transform: translateY(-2px); }
.links-btn:hover svg { transform: translateX(4px); }
.links-btn-primary { background: var(--gold); border-color: transparent; color: var(--dark); }
.links-btn-primary:hover { background: var(--gold-light); }
.links-social { display: flex; justify-content: center; gap: 22px; margin-top: 28px; }
.links-social a { color: rgba(245,242,238,0.7); transition: color 0.3s, transform 0.3s; }
.links-social a:hover { color: var(--gold); transform: translateY(-2px); }
.links-legal { margin-top: 34px; display: flex; justify-content: center; align-items: center; gap: 12px; font-family: 'Barlow Condensed', sans-serif; font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; }
.links-legal a { color: rgba(245,242,238,0.75); text-decoration: none; border-bottom: 1px solid rgba(207,157,123,0.5); padding-bottom: 2px; transition: color 0.3s; }
.links-legal a:hover { color: var(--gold); }
.links-legal span { color: rgba(207,157,123,0.6); }
.links-copy { margin-top: 14px; font-size: 0.72rem; color: rgba(245,242,238,0.3); }
@media (max-width: 480px) {
  .links-page { padding: 44px 16px 32px; }
  .links-btn { padding: 14px 16px; font-size: 0.76rem; }
}

/* Link-Seite: Hinweis nach Klick auf Anrufen/E-Mail (16.09.2026) */
.links-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px); z-index: 9500; padding: 12px 18px; border-radius: 999px; background: var(--cream); color: var(--charcoal); font-family: 'Barlow', sans-serif; font-size: 0.86rem; box-shadow: 0 16px 40px rgba(0,0,0,0.35); opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; max-width: calc(100vw - 32px); text-align: center; }
.links-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }