/* ============================================================
   Jan Gutzeit – Werbefotograf Dresden
   Shared stylesheet – loaded by all pages

   ARCHITECTURE — three zones share identical typography:
   ┌─ LEFT PANEL ──────────────────────────────────────────┐
   │  Head  : .site-name / .site-subtitle                  │
   │  Main  : labels · body · .names/.cats · .quote        │
   │  Footer: .bottom-links                                 │
   ├─ MENU LAYER (mirrors left panel, different bg) ───────┤
   │  Head  : .menu-logo ↔ .site-name                      │
   │          .menu-logo-sub ↔ .site-subtitle              │
   │  Main  : .menu-label ↔ .page-label                    │
   │          .menu-links a ↔ .names/.cats                  │
   │  Footer: .menu-footer ↔ .bottom-links                 │
   └─ RIGHT PANEL (text elements reuse same type sizes) ───┘

   Shared typography selectors are grouped at the top.
   Layout-only properties live in separate rules below.
   ============================================================ */




/* ── IVYPRESTO ── */
@font-face {
  font-family: 'Ivypresto';
  src: url('https://cdn.prod.website-files.com/6411d6bd038c413510e09dbc/6411e62be5c8ec6e0a5e1c04_ivypresto_italic_custom.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Ivypresto';
  src: url('https://cdn.prod.website-files.com/6411d6bd038c413510e09dbc/6411e62b81de60dcc8c64804_ivypresto-regular-custom.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}


/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }


/* ── SKIP LINK (accessibility: keyboard users) ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: .5rem 1rem;
  background: #212529;
  color: #fff;
  font-size: .85rem;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  transition: top .15s;
}
.skip-link:focus { top: 0; }


/* ── FOCUS STYLES (keyboard navigation – WCAG 2.1 AA) ── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid #212529;
  outline-offset: 3px;
}
.lightbox-img:focus-visible,
.right-panel img:focus-visible { outline: none; }


/* ── BASE ── */
html, body {
  height: 100%;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.5vw;
  color: #212529;
  background: #fff;
}

a { color: inherit; text-decoration: none; }


/* ── VISUALLY HIDDEN (SEO h1) ── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}


/* ============================================================
   TYPOGRAPHY — DESKTOP BASELINE
   Shared selectors cover left panel + menu layer + right panel
   ============================================================ */

/* HEAD – name */
.site-name, .menu-logo {
  font-size: 6vw; font-weight: 700; line-height: 1; text-transform: uppercase;
}
.site-name { margin-bottom: .6vw; flex-shrink: 0; }
.site-name a, .menu-logo a { color: inherit; }

/* HEAD – subtitle */
.site-subtitle, .menu-logo-sub {
  font-size: 1.1vw; font-weight: 300; letter-spacing: .18em;
  text-transform: uppercase; color: #888;
}
.site-subtitle { margin-bottom: auto; }
.menu-logo-sub { display: block; margin-top: min(.6vw, 1vh); font-size: min(1.1vw, 2vh); }
.menu-nav .section-label {
  margin-top: 0 !important;
  margin-bottom: 0.8em !important;
  flex-shrink: 0;
  font-size: min(1.0vw, 1.7vh);
  color: rgba(255,255,255,0.35);
}
html:not([data-theme="dark"]) .menu-nav .section-label { color: rgba(0,0,0,0.3); }

/* Label-Hierarchie: drei Ebenen */

/* Ebene 1 – Sektionsname (MEIN ANSATZ, ÜBER MICH etc.) */
.page-label, .ansatz-label {
  font-size: 0.85vw; letter-spacing: .18em; text-transform: uppercase; color: #aaa;
}

/* Ebene 2 – Kapitelüberschriften (FOTOGRAFIE, KONZEPTION etc.) */
.section-label,
.leistung-item h3,
.ansatz-item h3,
.contact-block-label,
.impr-label,
.form-title {
  font-size: 0.85vw; letter-spacing: .18em; text-transform: uppercase; color: #aaa; display: block;
}
/* Abstand vor Abschnittsbezeichnern (Gestalt-Proximität: Raum vor > Raum nach) */
.section-label,
.page-label,
.clients-label,
.ansatz-label,
.contact-block-label {
  margin-top:    3em !important;
  margin-bottom: 0.3em !important;
}
.left-panel > .section-label:first-child,
.bio + .section-label,
.section-label:first-child {
  margin-top: 2em !important;
}

/* Ebene 3 – Kleinste Metainfos (Feldlabels) */
.field label { font-size: 0.80vw; letter-spacing: .15em; text-transform: uppercase; color: #aaa; }

/* MAIN – body text (left + right panel) */
.bio, .contact-block-body, .impr-body, .clients, .kunden-names, .cta-intro,
.leistung-item p {
  font-size: 1.05vw; line-height: 1.55; color: #444;
}

.contact-block-body + .contact-block-body { margin-top: 0.8em; }

/* MAIN – navigation links (left panel + menu) */
.names, .cats { font-size: 1.55vw; line-height: 2.4vw; }
.names a, .cats a { display: block; transition: opacity .15s; }
.cats a:hover { opacity: .6; }
.cats a.active { text-decoration: underline; }
.names a.dim { opacity: .3; }
.names a.hovered { text-decoration: underline; }

/* MAIN – quote */
blockquote, .quote, .bio-quote {
  font-family:   'Ivypresto', Georgia, serif;
  font-style:    italic;
  font-size:     1.38vw;
  font-weight:   400;
  line-height:   1.55;
  color:         #212529;
  margin-top:    2.5em;
  margin-bottom: 1.5em;
  opacity:       0.85;
  border:        none;
  border-left:   none;
  padding-left:  0;
}

/* ── Fließtext Absätze ── */
.bio p,
.left-panel p,
.leistung-beschreibung p,
.leistung-beschreibung,
.contact-block-body p,
.ansatz-item p,
.testimonial-quote p {
  margin-top:    0 !important;
  margin-bottom: 0.85em !important;
  line-height:   1.55;
}
.bio p:last-child,
.leistung-beschreibung p:last-child {
  margin-bottom: 0;
}

/* ── Bio-Container ── */
.bio {
  margin-top:    0;
  margin-bottom: 0;
}

/* ── Kapitelüberschriften h3 ── */
h3,
.leistung-item h3,
.ansatz-item h3 {
  margin-top:    2.5em !important;
  margin-bottom: 0.3em !important;
  line-height:   1.25;
}

/* ── Abstand zwischen Items ── */
.leistung-item,
.ansatz-item {
  margin-top:    0;
  margin-bottom: 0;
}

/* ── Tagline/Subtitle Abstand ── */
.site-subtitle {
  margin-bottom: 0;
}


/* FOOTER */
.bottom-links {
  flex-shrink: 0; padding-top: 1.2vw;
}
.copyright { font-size: clamp(11px, 0.75vw, 14px); letter-spacing: 0.1em; color: #bbb; white-space: nowrap; }



/* ============================================================
   LAYOUT & COMPONENTS
   ============================================================ */

/* ── NAVBAR ── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 400;
  height: 5.55vw;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 3.2vw;
  background: transparent;
  pointer-events: none;
}
.navbar > * { pointer-events: all; }
.navbar-right { display: flex; align-items: center; gap: 1vw; }


/* ── CALL ME BUTTON ── */
.call-me {
  width: 2.6vw; height: 2.6vw;
  border: 1px solid #212529; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .5vw; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  text-align: center; line-height: 1.3;
  padding-top: 5px;
  transition: background .2s, color .2s;
}
.call-me:hover { background: #212529; color: #fff; }


/* ── HAMBURGER TOGGLER ── */
.toggler {
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; gap: .32vw; padding: .4vw;
}
.toggler span { display: block; width: 1.5vw; height: 2px; background: #212529; }


/* ── MENU OVERLAY ── */
.menu-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; width: 50%;
  background: #fff; z-index: 500;
  display: flex; flex-direction: column;
  padding: min(5.55vw, 8vh) 3.2vw min(3vw, 4vh);
  overflow: hidden;
  transform: translateX(100%);
  transition: transform .45s cubic-bezier(.77,0,.175,1);
}
.menu-overlay.open { transform: translateX(0); }

.menu-backdrop {
  display: none;
  position: fixed; inset: 0;
  z-index: 498;
  background: rgba(0,0,0,.35);
  cursor: pointer;
}
.menu-backdrop.open { display: block; }

.menu-header {
  display: flex; align-items: flex-start;
  margin-bottom: min(5vw, 7vh);
  flex-shrink: 0;
}
.menu-close {
  position: absolute; top: 0; right: 3.2vw;
  height: 5.55vw; display: flex; align-items: center;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 2vw; font-weight: 300; color: #212529;
}
.menu-contact { font-size: .88vw; line-height: 1.9; color: #666; margin-bottom: 1.5vw; }
.menu-contact a { color: #666; }
/* ── MENU NAV – neue Struktur ── */
.menu-nav {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1;
  min-height: 0;
  padding-top: min(3vw, 4vh);
  padding-bottom: min(2vw, 2.5vh);
  overflow: hidden;
}
.menu-main {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu-main > li { margin-bottom: 0.5em; }

.menu-main > li > a,
.menu-parent {
  font-size: min(1.4vw, 2.4vh);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #fff;
  text-decoration: none;
  cursor: default;
  display: block;
  padding: 0.15em 0;
  transition: opacity 0.2s;
}
.menu-main > li > a { cursor: pointer; }
.menu-main > li > a:hover { opacity: 0.6; }

.menu-sub {
  list-style: none;
  padding: 0.3em 0 0.5em 1.2em;
  margin: 0;
}
.menu-sub li { margin-bottom: 0.3em; }
.menu-sub a {
  font-size: min(1.0vw, 1.7vh);
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color 0.2s;
}
.menu-sub a:hover { color: #fff; }

.menu-secondary {
  list-style: none;
  padding: min(1.2vw, 1.8vh) 0 0;
  margin: auto 0 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em 1.5em;
  flex-shrink: 0;
}
.menu-secondary a {
  font-size: min(0.65vw, 1.2vh);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  text-decoration: none;
  transition: color 0.2s;
}
.menu-secondary a:hover { color: rgba(255,255,255,0.6); }

/* Kontaktinfos oben im Menü */
.menu-contact-top {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  margin-bottom: 1.8em;
  flex-shrink: 0;
}
.menu-contact-top a {
  font-size: min(1.4vw, 2.4vh);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color 0.2s;
}
.menu-contact-top a:hover { color: #fff; }

/* Light mode */
html:not([data-theme="dark"]) .menu-main > li > a,
html:not([data-theme="dark"]) .menu-parent { color: #1a1a1a; }
html:not([data-theme="dark"]) .menu-sub a { color: rgba(0,0,0,0.5); }
html:not([data-theme="dark"]) .menu-sub a:hover { color: #1a1a1a; }
html:not([data-theme="dark"]) .menu-secondary a { color: rgba(0,0,0,0.3); }
html:not([data-theme="dark"]) .menu-secondary a:hover { color: rgba(0,0,0,0.6); }
html:not([data-theme="dark"]) .menu-secondary { border-color: rgba(0,0,0,0.1); }
html:not([data-theme="dark"]) .menu-contact-top a { color: rgba(0,0,0,0.5); }
html:not([data-theme="dark"]) .menu-contact-top a:hover { color: rgba(0,0,0,1); }

/* Menu responsive */
@media (max-width: 768px) {
  .menu-nav { padding-top: min(10vw, 6vh); }
  .menu-contact-top a { font-size: min(6.5vw, 4.5vh); }
  .menu-main > li > a,
  .menu-parent { font-size: min(6.5vw, 4.5vh); }
  .menu-sub a { font-size: min(4.5vw, 3vh); }
  .menu-sub { padding-left: 5vw; }
  .menu-secondary a { font-size: min(2.8vw, 1.5vh); }
  .menu-secondary { gap: 0.5em 3vw; padding-top: 4vw; margin-top: auto; }
}
/* Phone Landscape: sehr kurze Höhe – Nav-Links skalieren mit vh */
@media (max-width: 768px) and (orientation: landscape) {
  .menu-overlay { padding: min(10vw, 6vh) 5vw min(3vw, 3vh); }
  .menu-nav { padding-top: min(6vw, 4vh); }
  .menu-contact-top a { font-size: min(6.5vw, 3vh); }
  .menu-main > li > a,
  .menu-parent { font-size: min(6.5vw, 3vh); }
  .menu-sub a { font-size: min(4.5vw, 2.1vh); }
  .menu-secondary a { font-size: min(2.8vw, 1.5vh); }
  .menu-secondary { margin-top: auto; padding-top: min(2vw, 1.5vh); }
}
@media (min-width: 769px) and (max-width: 1400px) and (orientation: landscape) {
  .menu-contact-top a { font-size: min(2vw, 3vh); }
  .menu-main > li > a,
  .menu-parent { font-size: min(2vw, 3vh); }
  .menu-sub a { font-size: min(1.4vw, 2.1vh); }
  .menu-secondary a { font-size: min(0.85vw, 1.4vh); }
}
@media (min-width: 769px) and (max-width: 1100px) and (orientation: portrait) {
  .menu-contact-top a { font-size: min(3.5vw, 3vh); }
  .menu-main > li > a,
  .menu-parent { font-size: min(3.5vw, 3vh); }
  .menu-sub a { font-size: min(2.5vw, 2.1vh); }
  .menu-secondary a { font-size: min(1.5vw, 1.4vh); }
}

.menu-footer-links { white-space: nowrap; }


/* ── THEME TOGGLE ── */
.theme-toggle {
  background: none; border: none; cursor: pointer;
  color: #212529; padding: .4vw; line-height: 1;
  display: flex; align-items: center;
  font-size: 1.1vw; transition: opacity .2s;
}
.theme-toggle:hover { opacity: .6; }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }


/* ── DARK MODE ── */
html[data-theme="dark"],
html[data-theme="dark"] body { background: #0e0e0e; color: #ddd; }

html[data-theme="dark"] .call-me { border-color: #ccc; color: #ccc; }
html[data-theme="dark"] .call-me:hover { background: #ccc; color: #1a1a1a; }
html[data-theme="dark"] .toggler span { background: #ccc; }
html[data-theme="dark"] .menu-close { color: #ccc; }

html[data-theme="dark"] .menu-overlay { background: #1c1c1c; }
html[data-theme="dark"] .menu-header { border-bottom-color: #333; }
html[data-theme="dark"] .page-label,
html[data-theme="dark"] .ansatz-label { color: #555; }

html[data-theme="dark"] .site-name a { color: #ddd; }
html[data-theme="dark"] .menu-logo a { color: #ddd; }
html[data-theme="dark"] .site-subtitle { color: #666; }
html[data-theme="dark"] .menu-logo-sub { color: #666; }
/* .ansatz-label dark mode → consolidated above with .page-label / .menu-label */

html[data-theme="dark"] .copyright { color: #444; }
html[data-theme="dark"] .theme-toggle { color: #ccc; }
html[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Panels & borders */
html[data-theme="dark"] .left-panel  { background: #000; }
html[data-theme="dark"] .right-panel { background: #000; border-left-color: #333; border-top-color: #333; }
html[data-theme="dark"] .grid-item   { background: #2a2a2a; }
html[data-theme="dark"] .news-thumb  { background: #2a2a2a; }
html[data-theme="dark"] .news-item   { border-bottom-color: #2e2e2e; }
html[data-theme="dark"] .news-item:first-child { border-top-color: #2e2e2e; }

/* Text */
html[data-theme="dark"] .impr-body       { color: #aaa; }
html[data-theme="dark"] .impr-label      { color: #666; }
html[data-theme="dark"] .impr-divider    { border-top-color: #333; }
html[data-theme="dark"] .impr-body a     { color: #aaa; }
html[data-theme="dark"] .bio             { color: #aaa; }
html[data-theme="dark"] .quote           { color: #ddd; }
html[data-theme="dark"] .clients         { color: #666; }
html[data-theme="dark"] .section-label   { color: #666; }
html[data-theme="dark"] .contact-block-body   { color: #aaa; }
html[data-theme="dark"] .contact-block-body a { color: #aaa; }
html[data-theme="dark"] .contact-block-label  { color: #555; }
html[data-theme="dark"] .news-title      { color: #ddd; }
html[data-theme="dark"] .news-excerpt    { color: #777; }
html[data-theme="dark"] .news-date,
html[data-theme="dark"] .news-cat,
html[data-theme="dark"] .news-read       { color: #555; }
html[data-theme="dark"] .intro           { color: #bbb; }
/* .page-label dark mode → consolidated above with .menu-label / .ansatz-label */
html[data-theme="dark"] .cats a          { color: #ddd; }

/* Form */
html[data-theme="dark"] .field label     { color: #555; }
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .field select    { color: #ddd; border-bottom-color: #444; background: transparent; }
html[data-theme="dark"] .field input:focus,
html[data-theme="dark"] .field textarea:focus { border-bottom-color: #ddd; }
html[data-theme="dark"] .form-title      { color: #555; }
html[data-theme="dark"] .form-success    { color: #aaa; }
html[data-theme="dark"] .submit-btn      { background: #ddd; color: #1a1a1a; }
html[data-theme="dark"] .submit-btn:hover { background: #fff; }


/* ── SPLIT LAYOUT (shared by all pages) ── */
#wrapper { display: flex; height: 100vh; overflow: hidden; }
.left-panel { width: 50%; padding: 5.55vw 5vw 2.2vw 3.2vw; display: flex; flex-direction: column; flex-shrink: 0; overflow-y: auto; }
.right-panel { flex: 1; height: 100vh; overflow-y: auto; }

/* ── LEFT PANEL VARIANTS ── */
html[data-page="index"] { overflow-y: auto; }
html[data-page="index"] body { height: auto; overflow: visible; }
html[data-page="about"]   .site-subtitle,
html[data-page="contact"] .site-subtitle { margin-bottom: 2.5vw; flex-shrink: 0; }

/* ── RIGHT PANEL VARIANTS ── */
html[data-page="index"] .right-panel,
html[data-page="about"]  .right-panel { position: relative; overflow: hidden; background: #f0f0f0; }
html[data-page="about"]  .right-panel { flex-shrink: 0; }
html[data-page="index"]  .right-panel img,
html[data-page="about"]  .right-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html[data-page="index"]  .right-panel img { opacity: 0; transition: opacity 1.2s ease; }
html[data-page="index"]  .right-panel img.active { opacity: 1; }
html[data-page="about"]  .right-panel img { object-position: center top; }

/* Leistungsseiten: Bild formatfüllend ohne Scroll */
html[data-page="leistungen"] .right-panel {
  position: relative;
  overflow: hidden;
}
html[data-page="leistungen"] .right-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
/* Fotografie: Goldener Schnitt durch Schleifscheibe, ~1/3 Blau links, ~2/3 Funken rechts */
.right-panel--fotografie img {
  object-position: 35% 38%;
}

html[data-page="portfolio"] .right-panel { padding: 6.4vw 3.2vw 3vw 1vw; position: relative; }
html[data-page="portfolio"] .right-panel.video-mode { overflow: hidden; padding: 0; }

.video-wrap { display: none; position: absolute; inset: 0; overflow: hidden; }
.video-wrap.active { display: block; }

/* iframe embed */
.video-wrap iframe {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 177.78vh;
  height: 100vh;
  min-width: 100%;
  border: none;
}

/* Transparente Klickfläche über dem iframe */
.video-click-zone {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
}
.video-click-zone::after {
  content: '';
  position: absolute;
  bottom: 1.5vw; right: 1.5vw;
  width: 2.4vw; height: 2.4vw;
  border: 1.5px solid rgba(255,255,255,.6);
  border-radius: 3px;
  opacity: 0;
  transition: opacity .2s;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E")
    center/65% no-repeat;
}
.video-click-zone:hover::after { opacity: 1; }

/* Video-Lightbox */
.video-lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.96);
  z-index: 700;
  display: none;
  align-items: center;
  justify-content: center;
}
.video-lightbox.open { display: flex; }
.video-lb-wrap {
  position: relative;
  width: min(88vw, calc(85vh * 16 / 9));
}
.video-lb-wrap iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
  display: block;
}

/* Thumbnail-Fallback */
.video-thumb-link {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.video-thumb-link img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.video-thumb-link:hover img { transform: scale(1.03); }
.video-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 4.5vw; height: 4.5vw;
  background: rgba(255,255,255,.88);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s;
  pointer-events: none;
}
.video-thumb-link:hover .video-play-btn {
  background: #fff;
  transform: translate(-50%, -50%) scale(1.1);
}
.video-play-btn svg { margin-left: .4vw; }

html[data-page="news"]      .right-panel { padding: 6.4vw 3.2vw 4vw 1vw; }
html[data-page="contact"]   .right-panel { padding: 6.4vw 3.2vw 3vw 2vw; display: flex; flex-direction: column; }
html[data-page="legal"]     .right-panel { padding: 6.4vw 3.2vw 4vw 2vw; }

/* ── BOTTOM LINKS VARIANTS ── */
html[data-page="contact"] .bottom-links { margin-top: auto; }
html[data-page="legal"]   .bottom-links { margin-top: 2vw; }


/* ── INDEX: names layout ── */
.names { margin-bottom: 1vw; }


/* ── ABOUT ── */
.bio { margin-bottom: 0; }
.clients { line-height: 1.9; color: #666; margin-bottom: auto; padding-bottom: 2vw; }
.clients-cat { display: block; font-size: .55vw; letter-spacing: .2em; text-transform: uppercase; color: #bbb; margin-top: 1.2em; margin-bottom: .1em; }
.clients-cat:first-child { margin-top: 0; }


/* ── PORTFOLIO ── */
html[data-page="portfolio"] .page-label { margin-top: auto !important; margin-bottom: 1.2vw; }
.cats { margin-bottom: 1.2vw; }

.grid { display: flex; gap: .6vw; align-items: flex-start; }
.grid-col { flex: 1; display: flex; flex-direction: column; gap: .6vw; min-width: 0; }
.grid-item { position: relative; overflow: hidden; cursor: pointer; background: #f0f0f0; display: block; width: 100%; flex-shrink: 0; }
.grid-item img { width: 100%; height: auto; display: block; transition: transform .5s ease; will-change: transform; }
.grid-item:hover img { transform: scale(1.06); }
.grid-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: .8vw 1vw; background: linear-gradient(transparent, rgba(0,0,0,.35)); color: #fff; font-size: .7vw; letter-spacing: .1em; text-transform: uppercase; opacity: 0; transition: opacity .3s; }
.grid-item:hover .grid-caption { opacity: 1; }

.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.94); z-index: 600; display: none; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox-content { display: flex; flex-direction: column; align-items: center; gap: 1.2vw; }
.lightbox-imgwrap { position: relative; }
.lightbox-img { max-width: 88vw; max-height: 82vh; object-fit: contain; display: block; }
.lightbox-title { position: absolute; bottom: 0; left: 0; right: 0; padding: 2vw 1.5vw 1vw; background: linear-gradient(transparent, rgba(0,0,0,.5)); color: #fff; font-size: .75vw; letter-spacing: .12em; text-transform: uppercase; opacity: 0; transition: opacity .3s; pointer-events: none; }
.lightbox-imgwrap:hover .lightbox-title { opacity: 1; }
.lightbox-close { position: absolute; top: 2vw; right: 3vw; background: none; border: none; cursor: pointer; color: #fff; font-size: 2.4vw; font-weight: 300; font-family: inherit; line-height: 1; opacity: .7; transition: opacity .2s; }
.lightbox-close:hover { opacity: 1; }
.lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #fff; font-size: 1.8vw; padding: 1.5vw 2vw; opacity: .5; transition: opacity .2s; }
.lightbox-prev:hover, .lightbox-next:hover { opacity: 1; }
.lightbox-prev { left: 0; }
.lightbox-next { right: 0; }
.lightbox-counter { color: #888; font-size: .7vw; letter-spacing: .15em; }


/* ── NEWS ── */
html[data-page="news"] .page-label { margin-bottom: 1.5vw; }
.news-list { display: flex; flex-direction: column; }
.news-item { display: grid; grid-template-columns: 12vw 1fr; gap: 0 2vw; padding: 2.2vw 0; border-bottom: 1px solid #e5e5e5; text-decoration: none; color: inherit; transition: opacity .2s; }
.news-item:first-child { border-top: 1px solid #e5e5e5; }
.news-item:hover { opacity: .6; }
.news-thumb { aspect-ratio: 4/3; overflow: hidden; background: #f0f0f0; flex-shrink: 0; }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; display: block; }
.news-item:hover .news-thumb img { transform: scale(1.04); }
.news-body { display: flex; flex-direction: column; justify-content: center; gap: .5vw; }
.news-meta { display: flex; gap: 1.2vw; align-items: center; }
.news-date { font-size: .65vw; letter-spacing: .15em; text-transform: uppercase; color: #aaa; }
.news-cat  { font-size: .65vw; letter-spacing: .12em; text-transform: uppercase; color: #aaa; }
.news-cat::before { content: '·'; margin-right: 1.2vw; }
.news-title { font-size: 1.3vw; font-weight: 400; line-height: 1.4; }
.news-excerpt { font-size: .9vw; line-height: 1.7; color: #666; margin-top: .2vw; }
.news-read { font-size: .65vw; letter-spacing: .15em; text-transform: uppercase; color: #aaa; margin-top: .5vw; }


/* ── KONTAKT ── */
.intro { font-size: 1.35vw; font-weight: 300; line-height: 1.7; margin-bottom: 3vw; }
.contact-block-body { margin-bottom: 0; }
.contact-block-body + .contact-block { margin-top: 3vw; }
.contact-block { margin-bottom: 2vw; }
.contact-block-label { margin-bottom: .6vw; }
.contact-block-body a { border-bottom: 1px solid transparent; transition: border-color .2s; }
.contact-block-body a:hover { border-color: #444; }
.form-title { margin-bottom: 2vw; flex-shrink: 0; }
.contact-form { display: flex; flex-direction: column; gap: 1.4vw; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1vw; }
.field { display: flex; flex-direction: column; gap: .35vw; }
.field input, .field textarea, .field select { font-family: inherit; font-size: 1vw; font-weight: 300; color: #212529; background: transparent; border: none; border-bottom: 1px solid #d0d0d0; padding: .5vw 0; outline: none; transition: border-color .2s; width: 100%; resize: none; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: #212529; }
.field textarea { min-height: 8vw; }
.submit-btn { align-self: flex-start; margin-top: .5vw; background: #212529; color: #fff; border: none; cursor: pointer; font-family: inherit; font-size: .7vw; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; padding: .9vw 2.2vw; transition: background .2s, color .2s; }
.submit-btn:hover { background: #000; }
.form-success { display: none; font-size: 1vw; line-height: 1.7; color: #444; padding: 1.5vw 0; }
.form-success.show { display: block; }


/* ── IMPRESSUM / DATENSCHUTZ ── */
.impr-section { margin-bottom: 2.5vw; }
.impr-label { margin-bottom: .8vw; }
.impr-body { line-height: 1.85; }

.impr-body a { border-bottom: 1px solid transparent; transition: border-color .2s; }
.impr-body a:hover { border-color: #444; }
.impr-divider { display: none; }


/* ── LANDING PAGE SECTIONS (index) ── */

/* Hero (in-panel, linker Bereich) */
.hero-section { width: 100%; max-width: 680px; margin-top: 4rem; margin-bottom: 1.5vw; }
.hero-headline { font-size: clamp(1.4rem, 2.8vw, 2rem); font-weight: 500; line-height: 1.3; margin-bottom: 1rem; color: #212529; }
.hero-sub { font-size: 0.9rem; line-height: 1.6; color: #666; max-width: 420px; margin-top: 1.4rem; }

/* Hero-Panel: vertikal zentriert, kein Leerraum durch auto-margin */
html[data-page="index"] #wrapper { display: flex; }
html[data-page="index"] .left-panel { display: flex; flex-direction: column; justify-content: flex-start; overflow-y: hidden; }
html[data-page="index"] .hero-section { margin-top: auto; }
html[data-page="index"] .site-subtitle { margin-bottom: 2vw; }

/* Trennlinie – nur vor dem Copyright-Abschluss */
.page-end { border-top: 1px solid #e8e8e8; }

/* Leistungen */
.leistungen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 4vw 3.2vw; background: #f8f8f8; }
.leistung-item { padding-top: 20px; padding-right: 2.5vw; }
.leistung-item:last-child { padding-right: 0; }
.leistung-item h3, .ansatz-item h3 { letter-spacing: 0.15em; margin-bottom: 16px; color: #212529; font-weight: 500; }
.leistung-item p { color: #555; }

/* Scroll-Hint Overlay */
.scroll-hint {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #fff;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 90;
  opacity: 1;
  transition: opacity 0.6s ease;
  animation: scrollHintBounce 2s ease-in-out infinite;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.scroll-hint svg { filter: drop-shadow(0 1px 3px rgba(0,0,0,0.35)); }
.scroll-hint--hidden { opacity: 0; }
@keyframes scrollHintBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(5px); }
}

/* Ansatz-Abschnitt (neu) */
.ansatz-neu { display: grid; grid-template-columns: 1fr 1fr; min-height: 80vh; }
.ansatz-text { padding: 5.55vw 3.2vw; display: flex; flex-direction: column; justify-content: flex-start; }
/* Overrides: neutralisiert unpassende .left-panel-Eigenschaften */
.ansatz-neu .left-panel { width: auto; overflow-y: visible; justify-content: flex-start; }
/* Layout-spezifisch für .ansatz-label (Typografie via .site-subtitle-Gruppe) */
.ansatz-label { margin-bottom: 2rem; }
/* Heading */
.ansatz-heading { font-size: clamp(1.4rem, 2.8vw, 2rem); line-height: 1.3; font-weight: 500; color: #212529; margin-bottom: 2.5rem; }
/* Items: Padding NUR im ansatz-neu Abschnitt der Landing Page */
.ansatz-neu .ansatz-item { padding: 1.4rem 0; }
.ansatz-neu .ansatz-item:last-child { padding-bottom: 0; }
/* .bio margin-bottom: neutralisiert 2.5vw aus globalem .bio-Stil */
.ansatz-item .bio { margin-bottom: 0; }

/* ── h3 KONTEXT-AUSNAHMEN ─────────────────────────────────────────────
   Das globale h3 { margin-top: 2.5em } gilt für h3 im Fließtext.
   Als erstes Kind in Container-Boxen braucht h3 keinen top-Abstand.
   ──────────────────────────────────────────────────────────────────── */

/* Index: Leistungs-Grid-Karten — h3 ist erstes Kind im gepaddeten Box */
.leistung-item > h3 {
  margin-top: 0 !important;
}
/* Index: ansatz-neu — h3 in Items mit eigenem Padding */
.ansatz-neu .ansatz-item > h3 {
  margin-top: 0 !important;
}

/* Leistungsseiten: ansatz-items ohne Container-Padding,
   spacing kommt allein aus dem h3 margin-top */
html[data-page="leistungen"] .ansatz-item > h3 {
  margin-top: 1.8em !important;
}
/* Erstes Item direkt nach section-label: weniger Luft */
html[data-page="leistungen"] .section-label + .ansatz-item > h3 {
  margin-top: 1em !important;
}

.ansatz-bild { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.ansatz-bild img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(100%); }

/* Portfolio-Vorschau */
.portfolio-preview { padding: 60px 3.2vw 2vw; }
.preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.preview-item { display: block; overflow: hidden; }
.preview-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; filter: grayscale(100%); transition: filter 0.3s ease; }
.preview-item img:hover { filter: grayscale(0%); }
.preview-link { font-size: .6vw; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; color: #000; border-bottom: 1px solid #000; padding-bottom: 2px; }

/* CTA */
.cta-section { text-align: center; padding: 3vw 3.2vw 60px; background: #f8f8f8; }
.cta-intro {
  font-family: 'Ivypresto', Georgia, serif;
  font-style: italic;
  font-size: 1.60vw;
  line-height: 1.5;
  color: #212529;
  font-weight: 400;
  margin-bottom: 1.5rem;
}
/* ── CTA-Button – gilt überall gleich ── */
.cta-btn {
  display: inline-block;
  padding: 0.8em 2em;
  background: transparent;
  color: #212529;
  border: 1px solid #212529;
  text-decoration: none;
  font-size: clamp(10px, 0.72vw, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}
.cta-btn:hover {
  background: #212529;
  color: #fff;
}

html[data-theme="dark"] .cta-btn {
  color: #ddd;
  border-color: #ddd;
}
html[data-theme="dark"] .cta-btn:hover {
  background: #ddd;
  color: #1a1a1a;
}

/* Nur auf der Index-Seite: zentriert */
.cta-section .cta-btn {
  display: block;
  text-align: center;
  max-width: 320px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .cta-btn {
    display: block;
    text-align: center;
    padding: 1em;
    font-size: 3.2vw;
    max-width: none;
    margin: 0;
  }
}

/* Kunden */
.kunden-section, .page-end { padding-left: 3.2vw; padding-right: 3.2vw; }
.kunden-section { padding-top: 3vw; padding-bottom: 60px; text-align: center; }
/* .kunden-label → .section-label (im HTML); .kunden-names → .bio-Gruppe */
.kunden-names { margin-top: 0.8rem; }

/* Page end */
.page-end { padding-top: 30px; padding-bottom: 30px; text-align: center; }

/* Dark mode */
[data-theme="dark"] .hero-headline { color: #e0e0e0; }
[data-theme="dark"] .hero-sub { color: #888; }
[data-theme="dark"] .leistungen-grid,
[data-theme="dark"] .cta-section { background: #1c1c1c; }
[data-theme="dark"] .page-end { border-top-color: #333; }
[data-theme="dark"] .leistung-item { border-top-color: #333; }
[data-theme="dark"] .leistung-item h3, [data-theme="dark"] .ansatz-item h3 { color: #ccc; }
[data-theme="dark"] .leistung-item p { color: #999; }
[data-theme="dark"] .preview-link { color: #ccc; border-bottom-color: #ccc; }

[data-theme="dark"] .ansatz-heading { color: #e0e0e0; }
[data-theme="dark"] .cta-intro { color: #ddd; }
/* Neutralisiert .left-panel { background: #000 } im Dark Mode */
[data-theme="dark"] .ansatz-neu .left-panel { background: transparent; }


/* Services bar */
.services-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 3vw;
  padding: 2vw 5vw;
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
}
.services-bar a {
  font-size: clamp(11px, 0.9vw, 14px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #888;
  text-decoration: none;
  transition: color 0.2s;
}
.services-bar a:hover { color: inherit; }
[data-theme="dark"] .services-bar { border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .services-bar a { color: #555; }


@media (max-width: 768px) {
  .services-bar { gap: 2vw 5vw; padding: 4vw 5vw; }
  .services-bar a { font-size: 3vw; }
}

/* ============================================================
   RESPONSIVE — MOBILE (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
  html, body { font-size: 3.2vw; overflow: auto; height: auto; }

  /* Navbar */
  .navbar { height: 12vw; }
  .navbar-right { gap: 5vw; }
  .call-me { width: 8vw; height: 8vw; font-size: 1.6vw; }
  .toggler { gap: 2.5vw; padding: 1vw; }
  .toggler span { width: 5vw; }
  .theme-toggle { font-size: 4vw; padding: 1vw; }

  /* Menu overlay */
  .menu-overlay { width: 100%; padding-top: 18vw; }
  .menu-header { margin-bottom: 4vw; }
  .menu-close { font-size: 7vw; height: 12vw; right: 5vw; }

  /* HEAD – name + subtitle (left panel & menu unified) */
  .site-name, .menu-logo { font-size: 12vw; margin-bottom: 1.2vw; }
  .site-subtitle, .menu-logo-sub { font-size: 4vw; letter-spacing: .15em; }
  .site-subtitle { margin-bottom: 4vw; }
  .menu-logo-sub { margin-top: 1.2vw; }

  /* MAIN – Label-Hierarchie mobile */
  .page-label, .ansatz-label { font-size: 3.8vw; }
  .section-label, .contact-block-label, .impr-label, .form-title,
  .leistung-item h3, .ansatz-item h3 { font-size: 3.2vw; letter-spacing: .15em; }
  .field label { font-size: 2.8vw; }

  /* MAIN – body text */
  .bio, .contact-block-body, .impr-body, .clients,
  .kunden-names, .cta-intro, .leistung-item p,
  .intro, .news-excerpt { font-size: 4vw; line-height: 1.8; }

  /* MAIN – navigation */
  .names, .cats { font-size: 5.5vw; line-height: 8.5vw; }

  /* FOOTER */
  .bottom-links { margin-top: 6vw; padding-top: 4vw; }

  /* Form inputs */
  .field input, .field textarea, .field select { font-size: 3.2vw; padding: 2vw 0; }
  .field textarea { min-height: 25vw; }
  .form-row { grid-template-columns: 1fr; }
  .submit-btn { font-size: 2.5vw; padding: 3vw 6vw; }

  /* Layout */
  #wrapper { flex-direction: column; height: auto; overflow: auto; }
  .left-panel { width: 100%; }
  .right-panel { width: 100%; height: auto; border-top: none; }

  /* ── LANDING SECTIONS – MOBILE ── */
  .hero-section { margin-top: 5vw; margin-bottom: 4vw; }
  .hero-headline, .ansatz-heading { font-size: 8vw; }
  .hero-sub { font-size: 4vw; line-height: 1.8; }
  .leistungen-grid { grid-template-columns: 1fr; padding: 8vw 5%; }
  .leistung-item { padding-right: 0; }
  .ansatz-neu { grid-template-columns: 1fr; min-height: auto; }
  /* .ansatz-heading – via clamp(), kein Override nötig */
  .ansatz-text { padding: 50px 5%; }
  /* Verhindert, dass html[data-page="index"] .left-panel das ansatz-text-Padding überschreibt */
  html[data-page="index"] .ansatz-neu .left-panel { padding: 50px 5%; }
  .ansatz-bild { position: relative; height: 70vw; }
  .cta-intro { margin-bottom: 4vw; }
  .preview-link { font-size: 2.4vw; }
  .preview-grid { grid-template-columns: 1fr; }
  .portfolio-preview { padding: 40px 5%; }
  .cta-section { padding: 30px 5% 50px; }
  .kunden-section { padding: 40px 5%; }

  /* ── PAGE-SPECIFIC MOBILE (layout only) ── */

  /* Index */
  html[data-page="index"], html[data-page="index"] body { overflow: auto; }
  html[data-page="index"] .left-panel { padding: 18vw 5vw 6vw; }
  html[data-page="index"] .right-panel { flex: 0 0 75vw; height: 75vw; }
  html[data-page="index"] .site-name { margin-bottom: 1.5vw; }
  html[data-page="index"] .site-subtitle { margin-bottom: 5vw; }

  /* About */
  html[data-page="about"] .left-panel { padding: 18vw 5vw 8vw; overflow: visible; }
  html[data-page="about"] .right-panel { flex: 0 0 75vw; height: 75vw; }
  html[data-page="about"] .section-label { margin-top: 6vw; }

  /* Portfolio */
  html[data-page="portfolio"] .left-panel { padding: 18vw 5vw 5vw; flex-shrink: initial; }
  html[data-page="portfolio"] .right-panel { padding: 0 4vw 8vw; }
  html[data-page="portfolio"] .cats a { display: inline; margin-right: 1vw; }
  html[data-page="portfolio"] .grid { gap: 2vw; }
  html[data-page="portfolio"] .grid-col { gap: 2vw; }
  html[data-page="portfolio"] .grid-caption { font-size: 2.5vw; padding: 2vw; }
  html[data-page="portfolio"] .lightbox-close { font-size: 7vw; top: 4vw; right: 5vw; }
  html[data-page="portfolio"] .lightbox-prev,
  html[data-page="portfolio"] .lightbox-next { font-size: 6vw; }
  html[data-page="portfolio"] .lightbox-counter { font-size: 3vw; }
  html[data-page="portfolio"] .lightbox-title { font-size: 2.5vw; }
  html[data-page="portfolio"] .lightbox-content { gap: 3vw; }

  /* News */
  html[data-page="news"] .left-panel { padding: 18vw 5vw 5vw; flex-shrink: initial; }
  html[data-page="news"] .right-panel { padding: 0 5vw 10vw; }
  html[data-page="news"] .news-item { grid-template-columns: 28vw 1fr; gap: 0 4vw; padding: 5vw 0; }
  html[data-page="news"] .news-date,
  html[data-page="news"] .news-cat,
  html[data-page="news"] .news-read { font-size: 2.2vw; }
  html[data-page="news"] .news-title { font-size: 4vw; }

  /* Contact */
  html[data-page="contact"] .bottom-links { margin-top: 6vw; }
  html[data-page="contact"] .left-panel { padding: 18vw 5vw 6vw; overflow: visible; }
  html[data-page="contact"] .right-panel { padding: 6vw 5vw 10vw; overflow: visible; }

  /* Legal */
  html[data-page="legal"] .left-panel { padding: 18vw 5vw 6vw; }
  html[data-page="legal"] .right-panel { padding: 6vw 5vw 10vw; }

  /* Spacing hierarchy fix – mobile portrait (font ~4vw, p+p ≈ 4.8vw) */
  .contact-block { margin-bottom: 6vw; }
  .contact-block-body { margin-bottom: 0; }
  .contact-block-body + .contact-block { margin-top: 8vw; }
  .impr-section { margin-bottom: 6vw; }
  .copyright { font-size: 2.2vw; }

  /* Typografie – mobile Anpassungen */
  blockquote, .quote, .bio-quote {
    font-size:     4.8vw;
    margin-top:    2em;
    margin-bottom: 1.2em;
    border:        none;
    padding-left:  0;
  }
  .bio p, .left-panel p,
  .leistung-beschreibung p {
    margin-top:    0 !important;
    margin-bottom: 0.9em;
  }
  .section-label, .page-label,
  .clients-label, .ansatz-label {
    margin-top: 2.5em !important;
  }
}


/* ============================================================
   RESPONSIVE — PHONE LANDSCAPE (≤768px, landscape)
   Stellt das 2-Spalten-Layout wieder her; überschreibt Mobile-Hochformat
   ============================================================ */
@media (max-width: 768px) and (orientation: landscape) {
  html, body { font-size: 2.4vw; }

  /* Navbar kompakter */
  .navbar { height: 7vw; }
  .menu-overlay { padding-top: 10vw; }
  .menu-close { height: 7vw; }

  /* 2-Spalten-Layout wiederherstellen */
  #wrapper { flex-direction: row; height: 100vh; overflow: hidden; }
  .left-panel { width: 50%; height: 100vh; overflow-y: auto; }
  .right-panel { width: 50%; height: 100vh; border-top: none; }

  /* Index-Seite */
  html[data-page="index"] .left-panel { padding: 9vw 4vw 3vw; }
  html[data-page="index"] .right-panel { flex: 0 0 50%; height: 100vh; }
  html[data-page="index"] .site-subtitle { margin-bottom: 1.5vw; }

  /* Typografie */
  .site-name, .menu-logo { font-size: 7vw; }
  .site-subtitle, .menu-logo-sub { font-size: 1.8vw; }
  .hero-headline, .ansatz-heading { font-size: 4.5vw; }
  .hero-sub { font-size: 2vw; line-height: 1.6; }
  .hero-section { margin-top: 2vw; margin-bottom: 1vw; }
  .page-label, .ansatz-label { font-size: 2vw; }
  .section-label, .contact-block-label, .impr-label, .form-title,
  .leistung-item h3, .ansatz-item h3 { font-size: 1.8vw; }
  .bio, .contact-block-body, .impr-body, .clients,
  .kunden-names, .cta-intro, .leistung-item p,
  .intro, .news-excerpt { font-size: 2.4vw; line-height: 1.7; }
  .names, .cats { font-size: 3.5vw; line-height: 5.5vw; }
  .copyright { font-size: 1.8vw; }

  /* Landing-Sections: kompaktere vertikale Abstände */
  .leistungen-grid { padding: 5vw 5%; }
  .portfolio-preview { padding: 5vw 5% 2vw; }
  .cta-section { padding: 4vw 5%; }
  .kunden-section { padding: 4vw 5%; }
}


/* ============================================================
   RESPONSIVE — TABLET LANDSCAPE (769–1400px, landscape)
   ============================================================ */
@media (min-width: 769px) and (max-width: 1400px) and (orientation: landscape) {
  html, body { font-size: 2vw; }

  /* Navbar */
  .navbar { height: 7vw; }
  .navbar-right { gap: 1.5vw; }
  .call-me { width: 3.5vw; height: 3.5vw; font-size: .7vw; }
  .toggler span { width: 2vw; }
  .theme-toggle { font-size: 1.4vw; padding: .4vw; }

  /* Menu */
  .menu-header { margin-bottom: 5vw; }

  /* HEAD – unified */
  .site-name, .menu-logo { font-size: 7vw; }
  .site-name { margin-bottom: .7vw; }
  .site-subtitle, .menu-logo-sub { font-size: 1.5vw; }
  .menu-logo-sub { margin-top: .7vw; }

  /* MAIN – Label-Hierarchie landscape */
  .page-label, .ansatz-label { font-size: 1.3vw; }
  .page-label { margin-top: 3vw; }
  .section-label, .contact-block-label, .impr-label, .form-title,
  .leistung-item h3, .ansatz-item h3 { font-size: 1.1vw; }
  .field label { font-size: 0.9vw; }
  .copyright { font-size: clamp(11px, 0.85vw, 14px); }

  /* MAIN – body text */
  .bio, .contact-block-body, .impr-body, .clients,
  .kunden-names, .cta-intro, .leistung-item p,
  .intro, .news-excerpt { font-size: 1.4vw; line-height: 1.85; }

  /* MAIN – navigation */
  .names, .cats { font-size: 2vw; line-height: 3.2vw; }

  /* FOOTER */

  /* News metadata */
  .news-date, .news-cat, .news-read { font-size: 1vw; }
  .news-title { font-size: 1.6vw; }
  .news-item { grid-template-columns: 14vw 1fr; }

  /* Right panel: align content top with name (= navbar height) */
  html[data-page="portfolio"] .right-panel,
  html[data-page="news"]      .right-panel,
  html[data-page="contact"]   .right-panel,
  html[data-page="legal"]     .right-panel { padding-top: 6.5vw; }

  /* ── LANDING SECTIONS – TABLET LANDSCAPE ── */
  .hero-sub { font-size: 1.4vw; line-height: 1.85; }
  /* .ansatz-heading – via clamp(), kein Override nötig */

}


/* ============================================================
   RESPONSIVE — TABLET PORTRAIT (769–1100px, portrait)
   ============================================================ */
@media (min-width: 769px) and (max-width: 1100px) and (orientation: portrait) {
  html, body { font-size: 3vw; overflow: auto; height: auto; }

  /* Navbar */
  .navbar { height: 9vw; }
  .navbar-right { gap: 3vw; }
  .call-me { width: 5.5vw; height: 5.5vw; font-size: 1vw; }
  .toggler { gap: 1.8vw; padding: .7vw; }
  .toggler span { width: 3.5vw; }
  .theme-toggle { font-size: 3vw; padding: .7vw; }

  /* Menu overlay */
  .menu-overlay { width: 100%; padding-top: 14vw; }
  .menu-header { margin-bottom: 3vw; }
  .menu-close { font-size: 6vw; height: 9vw; right: 4vw; }

  /* Layout */
  #wrapper { flex-direction: column; height: auto; overflow: auto; }
  .left-panel { width: 100%; }
  .right-panel { width: 100%; height: auto; border-top: none; }

  /* HEAD – unified */
  .site-name, .menu-logo { font-size: 10vw; margin-bottom: 1vw; }
  .site-subtitle, .menu-logo-sub { font-size: 3.6vw; letter-spacing: .15em; }
  .site-subtitle { margin-bottom: 3vw; }
  .menu-logo-sub { margin-top: 1vw; }

  /* MAIN – Label-Hierarchie portrait */
  .page-label, .ansatz-label { font-size: 2.6vw; }
  .section-label, .contact-block-label, .impr-label, .form-title,
  .leistung-item h3, .ansatz-item h3 { font-size: 2.2vw; }
  .field label { font-size: 1.9vw; }

  /* MAIN – body text */
  .bio, .contact-block-body, .impr-body, .clients,
  .kunden-names, .cta-intro, .leistung-item p,
  .intro, .news-excerpt { font-size: 3vw; line-height: 1.8; }

  /* MAIN – navigation */
  .names, .cats { font-size: 5vw; line-height: 8vw; }

  /* FOOTER */
  .bottom-links { margin-top: 5vw; padding-top: 3vw; }

  /* Form inputs */
  .field input, .field textarea, .field select { font-size: 2.6vw; padding: 1.5vw 0; }
  .field textarea { min-height: 18vw; }
  .form-row { grid-template-columns: 1fr; }
  .submit-btn { font-size: 2.2vw; padding: 2.2vw 5vw; }

  /* ── LANDING SECTIONS – TABLET PORTRAIT ── */
  .hero-section { margin-top: 4vw; margin-bottom: 3vw; }
  .hero-sub { font-size: 3vw; line-height: 1.8; }
  .leistungen-grid { grid-template-columns: 1fr; padding: 50px 5%; }
  .leistung-item { padding-right: 0; }
  .portfolio-preview { padding: 40px 5% 2vw; }
  .copyright { font-size: 1.8vw; }
  .ansatz-neu { grid-template-columns: 1fr; min-height: auto; }
  /* .ansatz-heading – via clamp(), kein Override nötig */
  .ansatz-text { padding: 60px 5%; }
  /* Verhindert, dass html[data-page="index"] .left-panel das ansatz-text-Padding überschreibt */
  html[data-page="index"] .ansatz-neu .left-panel { padding: 60px 5%; }
  .ansatz-bild { position: relative; height: 60vw; }
  .cta-intro { margin-bottom: 2.5vw; }
  .cta-section { padding: 35px 5% 55px; }
  .kunden-section { padding: 50px 5%; }

  /* ── PAGE-SPECIFIC TABLET PORTRAIT (layout only) ── */

  /* Index */
  html[data-page="index"], html[data-page="index"] body { overflow: auto; }
  html[data-page="index"] .left-panel { padding: 14vw 4vw 5vw; }
  html[data-page="index"] .right-panel { flex: 0 0 60vw; height: 60vw; }
  html[data-page="index"] .site-name { margin-bottom: 1vw; }
  html[data-page="index"] .site-subtitle { margin-bottom: 4vw; }

  /* About */
  html[data-page="about"] .left-panel { padding: 14vw 4vw 6vw; overflow: visible; }
  html[data-page="about"] .right-panel { flex: 0 0 60vw; height: 60vw; }
  html[data-page="about"] .section-label { margin-top: 5vw; }

  /* Portfolio */
  html[data-page="portfolio"] .left-panel { padding: 14vw 4vw 4vw; flex-shrink: initial; }
  html[data-page="portfolio"] .right-panel { padding: 0 3vw 6vw; }
  html[data-page="portfolio"] .cats a { display: inline; margin-right: 1vw; }
  html[data-page="portfolio"] .grid { gap: 1.5vw; }
  html[data-page="portfolio"] .grid-col { gap: 1.5vw; }
  html[data-page="portfolio"] .grid-caption { font-size: 2vw; padding: 1.5vw; }
  html[data-page="portfolio"] .lightbox-close { font-size: 5vw; top: 3vw; right: 4vw; }
  html[data-page="portfolio"] .lightbox-prev,
  html[data-page="portfolio"] .lightbox-next { font-size: 4.5vw; }
  html[data-page="portfolio"] .lightbox-counter { font-size: 2.2vw; }
  html[data-page="portfolio"] .lightbox-title { font-size: 2vw; }
  html[data-page="portfolio"] .lightbox-content { gap: 2vw; }

  /* News */
  html[data-page="news"] .left-panel { padding: 14vw 4vw 4vw; flex-shrink: initial; }
  html[data-page="news"] .right-panel { padding: 0 4vw 8vw; }
  html[data-page="news"] .news-item { grid-template-columns: 22vw 1fr; gap: 0 3vw; padding: 4vw 0; }
  html[data-page="news"] .news-date,
  html[data-page="news"] .news-cat,
  html[data-page="news"] .news-read { font-size: 2vw; }
  html[data-page="news"] .news-title { font-size: 3vw; }

  /* Contact */
  html[data-page="contact"] .bottom-links { margin-top: 5vw; }
  html[data-page="contact"] .left-panel { padding: 14vw 4vw 5vw; overflow: visible; }
  html[data-page="contact"] .right-panel { padding: 5vw 4vw 8vw; overflow: visible; }

  /* Legal */
  html[data-page="legal"] .left-panel { padding: 14vw 4vw 5vw; }
  html[data-page="legal"] .right-panel { padding: 5vw 4vw 8vw; }

  /* Spacing hierarchy fix – tablet portrait (font ~2.5vw, p+p ≈ 3vw) */
  .contact-block { margin-bottom: 4vw; }
  .contact-block-body { margin-bottom: 0; }
  .contact-block-body + .contact-block { margin-top: 5vw; }
  .impr-section { margin-bottom: 4vw; }
}


/* ============================================================
   RESPONSIVE — ALLE MITTLEREN BILDSCHIRME (769–1400px)
   Zitat-Schriftgröße für Tablet landscape + portrait
   ============================================================ */
@media (min-width: 769px) and (max-width: 1400px) {
  blockquote, .quote, .bio-quote {
    font-size: 1.55vw;
  }
}


/* ── LEISTUNGS-CTA ── */
.leistung-cta {
  margin-top: 3em;
  opacity: 0.85;
}

.leistung-cta-text {
  font-family:   'Ivypresto', Georgia, serif;
  font-style:    italic;
  font-size:     1.38vw;
  font-weight:   400;
  line-height:   1.55;
  margin-top:    0;
  margin-bottom: 1.5em;
}

.leistung-cta .cta-btn {
  margin-bottom: 1em;
}

.leistung-cta-hint {
  font-size: clamp(10px, 0.7vw, 12px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #888;
  margin-top: 0.8em;
  margin-bottom: 0;
  font-style: normal;
  opacity: 1;
}

html[data-theme="dark"] .leistung-cta-hint {
  color: #555;
}

@media (max-width: 768px) {
  .leistung-cta { margin-top: 2.5em; }
  .leistung-cta-text { font-size: 4.8vw; }
  .leistung-cta-hint { font-size: 3vw; }
}
@media (min-width: 769px) and (max-width: 1400px) and (orientation: landscape) {
  .leistung-cta-text { font-size: 1.55vw; }
}
@media (min-width: 769px) and (max-width: 1100px) and (orientation: portrait) {
  .leistung-cta-text { font-size: 3.6vw; }
}