/*
Theme Name:     Jens Welsch Fotograf Theme
Theme URI:      https://www.jens-welsch.de/
Template:       kadence
Author:         Jens Welsch
Author URI:     https://www.jens-welsch.de/
Description:    Kadence Child-Theme für jens-welsch.de. Leica/Bauhaus-inspiriertes Design: warme Neutraltöne, gedämpftes Kirschrot als Akzent, serifenlose Typografie, klare Rasterstrukturen.
Version:        1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary
Text Domain: jens-welsch-fotograf
*/

/* ============================================================
   DESIGN-TOKENS  (überschreiben Kadence-Defaults)
   ============================================================ */
:root {
  /* Farben */
  --global-palette1: #111111;
  --global-palette2: #111111;
  --global-palette3: #111111;
  --global-palette4: #333333;
  --global-palette5: #66635F;
  --global-palette6: #D8D6D0;
  --global-palette7: #F5F3EE;
  --global-palette8: #C41E1E;
  --global-palette9: #FFFDFA;

  /* Typografie */
  --global-body-font-family: Arial, Helvetica, sans-serif;
  --global-heading-font-family: Arial, Helvetica, sans-serif;
}

/* ============================================================
   HEADER  –  Logo links, Navigation rechts, sticky
   ============================================================ */
.site-header {
  background: rgba(245, 243, 238, 0.94) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #D8D6D0;
}
.site-branding .site-title,
.site-branding .site-title a {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #111111 !important;
  font-family: Arial, Helvetica, sans-serif !important;
}
/* Roter Punkt nach "FOTOGRAF" im Logo */
.site-branding .site-description {
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #111111 !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

/* Navigation */
#primary-navigation .menu-item a,
#secondary-navigation .menu-item a {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: #111111 !important;
  font-family: Arial, Helvetica, sans-serif !important;
}
#primary-navigation .menu-item a:hover,
#secondary-navigation .menu-item a:hover {
  color: #C41E1E !important;
}
/* Kontakt-Link rot */
#primary-navigation .menu-item.kontakt a,
#secondary-navigation .menu-item.kontakt a,
.nav-kontakt > a {
  color: #C41E1E !important;
}

/* ============================================================
   TYPOGRAFIE
   ============================================================ */
body {
  font-family: Arial, Helvetica, sans-serif !important;
  color: #111111;
  background-color: #F5F3EE;
  font-size: 16px;
  line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #111111;
}
p { color: #333333; }
a { color: #111111; }
a:hover { color: #C41E1E; }

/* ============================================================
   BUTTONS
   ============================================================ */
.wp-block-button__link,
.kb-btn,
.kadence-button {
  background-color: #C41E1E !important;
  color: #ffffff !important;
  border-color: #C41E1E !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 14px 26px !important;
}
.wp-block-button__link:hover,
.kb-btn:hover,
.kadence-button:hover {
  background-color: #a01818 !important;
  border-color: #a01818 !important;
  opacity: 1 !important;
}
/* Outline-Button */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: #C41E1E !important;
  border-color: #C41E1E !important;
}

/* ============================================================
   HILFSELEMENTE  –  Rote Linie, Nummer, Kicker
   ============================================================ */
.jw-red-rule {
  width: 56px;
  height: 2px;
  background: #C41E1E;
  margin: 18px 0;
  display: block;
}
.jw-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #C41E1E;
  display: block;
  margin-bottom: 14px;
}
.jw-section-number {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #C41E1E;
  display: block;
  margin-bottom: 6px;
}
.jw-red-dot {
  display: inline-block;
  width: 9px; height: 9px;
  background: #C41E1E;
  border-radius: 50%;
  vertical-align: middle;
  margin-left: 2px;
}

/* ============================================================
   HERO-LAYOUT  –  50 % Bild / 50 % Text
   Wird über Kadence Row/Column-Blöcke gebaut.
   Diese Klasse kann dem Row-Block als Custom CSS Class
   zugewiesen werden.
   ============================================================ */
.jw-hero-row {
  min-height: 560px !important;
  background: #FFFDFA !important;
}
.jw-hero-row .kadence-column:first-child {
  padding: 0 !important;
}
.jw-hero-row .kadence-column:first-child img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}
.jw-hero-copy {
  display: flex !important;
  align-items: center !important;
  padding: 60px 5vw 60px 4vw !important;
}
.jw-hero-copy h1 {
  font-size: clamp(32px, 4.2vw, 68px) !important;
  line-height: 1.02 !important;
  letter-spacing: 0.14em !important;
  font-weight: 500 !important;
  margin-bottom: 20px !important;
}

/* ============================================================
   SEKTION-GRID  –  32 % Text / 68 % Bild
   ============================================================ */
.jw-section-32-68 {
  background: #FFFDFA !important;
  border-top: 1px solid #D8D6D0 !important;
  min-height: 500px !important;
}
.jw-section-32-68 .kadence-column:first-child {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 52px 40px !important;
}
.jw-section-32-68 .kadence-column:last-child {
  padding: 0 !important;
}
.jw-section-32-68 .kadence-column:last-child img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ============================================================
   PORTRAIT-TRIO  –  40 % / 22 % / 38 %
   ============================================================ */
.jw-portrait-trio {
  background: #FFFDFA !important;
  border-top: 1px solid #D8D6D0 !important;
  min-height: 520px !important;
}
.jw-portrait-trio .kadence-column:nth-child(1),
.jw-portrait-trio .kadence-column:nth-child(3) {
  padding: 0 !important;
}
.jw-portrait-trio .kadence-column:nth-child(1) img,
.jw-portrait-trio .kadence-column:nth-child(3) img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.jw-portrait-trio .kadence-column:nth-child(2) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 48px 36px !important;
  border-left: 1px solid #D8D6D0 !important;
  border-right: 1px solid #D8D6D0 !important;
  background: #FFFDFA !important;
}

/* ============================================================
   KARTEN  –  3 Spalten, je 2/5 Text + 3/5 Bild
   ============================================================ */
.jw-cards-row {
  background: #FFFDFA !important;
  border-top: 1px solid #D8D6D0 !important;
}
.jw-card {
  border-right: 1px solid #D8D6D0 !important;
  min-height: 380px !important;
}
.jw-card:last-child { border-right: 0 !important; }
.jw-card-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 32px 22px 36px !important;
}
.jw-card-text h3 {
  font-size: clamp(16px, 1.6vw, 22px) !important;
  letter-spacing: 0.18em !important;
}
.jw-card-img {
  padding: 0 !important;
}
.jw-card-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ============================================================
   BÜHNE  –  30 % Text / 70 % Bild
   ============================================================ */
.jw-stage-row {
  background: #FFFDFA !important;
  border-top: 1px solid #D8D6D0 !important;
  min-height: 430px !important;
}
.jw-stage-row .kadence-column:first-child {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 52px 40px !important;
}
.jw-stage-row .kadence-column:last-child {
  padding: 0 !important;
}
.jw-stage-row .kadence-column:last-child img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ============================================================
   KONTAKT-CTA
   ============================================================ */
.jw-cta-section {
  text-align: center !important;
  padding: 72px 40px !important;
  background: #FFFDFA !important;
  border-top: 1px solid #D8D6D0 !important;
}
.jw-cta-section h2 {
  font-size: clamp(20px, 2.8vw, 40px) !important;
  letter-spacing: 0.18em !important;
}

/* ============================================================
   SERVICE-LINKS  (Portrait-Sektion)
   ============================================================ */
.jw-service-links a {
  display: block;
  margin: 12px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #111111;
  text-decoration: none;
  transition: color 0.15s;
}
.jw-service-links a:hover { color: #C41E1E; }
.jw-service-links a .arrow { color: #C41E1E; margin-left: 8px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: #F5F3EE !important;
  border-top: 1px solid #D8D6D0 !important;
  color: #66635F !important;
}
.site-footer a { color: #66635F !important; }
.site-footer a:hover { color: #C41E1E !important; }
.footer-html,
.footer-html p {
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #66635F !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

/* ============================================================
   KADENCE BLOCKS  –  Allgemeine Anpassungen
   ============================================================ */
/* Trennlinie rot */
.wp-block-separator,
.kb-divider {
  border-color: #C41E1E !important;
  border-width: 2px !important;
  max-width: 56px !important;
  margin-left: 0 !important;
}
/* Zentrierte Trennlinie (für CTA) */
.jw-cta-section .wp-block-separator,
.jw-cta-section .kb-divider {
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Bildblöcke ohne Rand */
.wp-block-image img,
.kb-image img {
  border-radius: 0 !important;
}
/* Abstände zwischen Sektionen entfernen */
.entry-content > * + * { margin-top: 0 !important; }

/* ============================================================
   RESPONSIVE  –  Tablet (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .jw-hero-row .kb-row-layout-inner { flex-direction: column !important; }
  .jw-section-32-68 .kb-row-layout-inner { flex-direction: column !important; }
  .jw-portrait-trio .kb-row-layout-inner { flex-direction: column !important; }
  .jw-portrait-trio .kadence-column:nth-child(2) {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 1px solid #D8D6D0 !important;
  }
  .jw-cards-row .kb-row-layout-inner { flex-direction: column !important; }
  .jw-card { border-right: 0 !important; border-bottom: 1px solid #D8D6D0 !important; }
  .jw-stage-row .kb-row-layout-inner { flex-direction: column !important; }
}

/* ============================================================
   RESPONSIVE  –  Mobil (≤ 600px)
   ============================================================ */
@media (max-width: 600px) {
  .jw-hero-copy { padding: 40px 20px !important; }
  .jw-section-32-68 .kadence-column:first-child { padding: 40px 20px !important; }
  .jw-portrait-trio .kadence-column:nth-child(2) { padding: 40px 20px !important; }
  .jw-card-text { padding: 28px 20px 32px !important; }
  .jw-stage-row .kadence-column:first-child { padding: 40px 20px !important; }
  .jw-cta-section { padding: 52px 20px !important; }
}