/*
 * responsive.css — Lex De Maria
 * Responsive design system: mobile → tablet → desktop → 4K
 * Breakpoints:
 *   ≥ 1440px  large/4K: constrain content width
 *   ≤ 1199px  tablet / small laptop
 *   ≤ 767px   mobile (phone)
 */

/* ============================================================
   LARGE SCREENS  (≥ 1440px)
   Prevent content from stretching infinitely on 4K monitors.
   Content is capped at ~1360px by increasing side padding.
   ============================================================ */
@media (min-width: 1440px) {
  /* Nav */
  nav {
    padding-left:  max(40px, calc((100vw - 1360px) / 2));
    padding-right: max(40px, calc((100vw - 1360px) / 2));
  }

  /* Hero (index pages – inline styles) */
  .hero {
    padding-left:  max(40px, calc((100vw - 1360px) / 2));
    padding-right: max(40px, calc((100vw - 1360px) / 2));
  }

  /* About section – align with services grid */
  .about-text {
    padding-left: max(120px, calc((100vw - 1360px) / 2));
  }
  .about-right {
    padding-right: max(120px, calc((100vw - 1360px) / 2));
  }

  /* Services section wrapper (index pages) */
  .services {
    padding-left:  max(120px, calc((100vw - 1360px) / 2));
    padding-right: max(120px, calc((100vw - 1360px) / 2));
  }

  /* Shared-CSS pages */
  .page-header {
    padding-left:  max(120px, calc((100vw - 1360px) / 2));
    padding-right: max(120px, calc((100vw - 1360px) / 2));
  }
  .two-col {
    padding-left:  max(120px, calc((100vw - 1360px) / 2));
    padding-right: max(120px, calc((100vw - 1360px) / 2));
  }
  .expertise-cards {
    padding-left:  max(120px, calc((100vw - 1360px) / 2));
    padding-right: max(120px, calc((100vw - 1360px) / 2));
  }

  /* Footer */
  footer {
    padding-left:  max(120px, calc((100vw - 1360px) / 2));
    padding-right: max(120px, calc((100vw - 1360px) / 2));
  }

  /* Blog pages (inline styles per file) */
  .blog-header {
    padding-left:  max(120px, calc((100vw - 1360px) / 2));
    padding-right: max(120px, calc((100vw - 1360px) / 2));
  }
  .blog-hero {
    padding-left:  max(120px, calc((100vw - 1360px) / 2));
    padding-right: max(120px, calc((100vw - 1360px) / 2));
  }
  .blog-cta {
    padding-left:  max(120px, calc((100vw - 1360px) / 2));
    padding-right: max(120px, calc((100vw - 1360px) / 2));
  }
  .blog-main {
    padding-left:  max(120px, calc((100vw - 1360px) / 2));
    padding-right: max(120px, calc((100vw - 1360px) / 2));
  }

  /* Contact CTA section (index pages) */
  .contact-section {
    padding-left:  max(120px, calc((100vw - 1360px) / 2));
    padding-right: max(120px, calc((100vw - 1360px) / 2));
  }

  /* Inline-styled tab sections (immobilienrecht, property-law) */
  .tabs-section {
    padding-left:  max(120px, calc((100vw - 1360px) / 2)) !important;
    padding-right: max(120px, calc((100vw - 1360px) / 2)) !important;
  }

  /* shared.css: content-body */
  .content-body {
    padding-left:  max(120px, calc((100vw - 1360px) / 2));
    padding-right: max(120px, calc((100vw - 1360px) / 2));
  }

  /* Zur Person / About pages */
  .zp-intro,
  .zp-sections,
  .highlight-box,
  .cta-box {
    padding-left:  max(120px, calc((100vw - 1360px) / 2));
    padding-right: max(120px, calc((100vw - 1360px) / 2));
  }

  /* Expertise overview pages */
  .expertise-hero,
  .expertise-cards-grid,
  .qualities-section {
    padding-left:  max(120px, calc((100vw - 1360px) / 2));
    padding-right: max(120px, calc((100vw - 1360px) / 2));
  }

  /* Kontakt pages */
  .kontakt-grid,
  .standorte {
    padding-left:  max(120px, calc((100vw - 1360px) / 2));
    padding-right: max(120px, calc((100vw - 1360px) / 2));
  }

  /* FAQ pages — outer edges of 2-col layout */
  .faq-intro-text  { padding-left:  max(120px, calc((100vw - 1360px) / 2)); }
  .faq-intro-right { padding-right: max(120px, calc((100vw - 1360px) / 2)); }
  .faq-services,
  .faq-cta {
    padding-left:  max(120px, calc((100vw - 1360px) / 2));
    padding-right: max(120px, calc((100vw - 1360px) / 2));
  }

  /* Checkliste pages — outer edges of 2-col layout */
  .cl-intro-text  { padding-left:  max(120px, calc((100vw - 1360px) / 2)); }
  .cl-intro-right { padding-right: max(120px, calc((100vw - 1360px) / 2)); }
  .cl-cta {
    padding-left:  max(120px, calc((100vw - 1360px) / 2));
    padding-right: max(120px, calc((100vw - 1360px) / 2));
  }

  /* LP pages (immobilienrecht-italien etc.) — outer edges */
  .lp-about-text  { padding-left:  max(120px, calc((100vw - 1360px) / 2)); }
  .lp-about-right { padding-right: max(120px, calc((100vw - 1360px) / 2)); }
  .lp-services,
  .lp-vor-ort {
    padding-left:  max(120px, calc((100vw - 1360px) / 2));
    padding-right: max(120px, calc((100vw - 1360px) / 2));
  }

  /* Danke / Thank-you pages */
  .danke-section {
    padding-left:  max(120px, calc((100vw - 1360px) / 2));
    padding-right: max(120px, calc((100vw - 1360px) / 2));
  }

  /* Nachlassplanung CTA strip */
  .nl-services {
    padding-left:  max(120px, calc((100vw - 1360px) / 2));
    padding-right: max(120px, calc((100vw - 1360px) / 2));
  }

  /* Kontakt / other single-column pages */
  .kontakt-inner,
  .impressum-inner,
  .datenschutz-inner {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding-left:  max(40px, calc((100vw - 1360px) / 2));
    padding-right: max(40px, calc((100vw - 1360px) / 2));
  }
}


/* ============================================================
   TABLET / SMALL LAPTOP  (≤ 1199px)
   ============================================================ */
@media (max-width: 1199px) {

  /* Nav */
  nav {
    padding: 0 40px;
    gap: 20px;
  }

  /* Hero */
  .hero {
    padding: 60px 40px 50px;
  }
  .hero h1 {
    font-size: 44px !important;
  }

  /* About section */
  .about-text {
    padding: 60px 40px 60px 60px;
  }
  .about-right {
    padding: 40px 60px 40px 20px;
  }

  /* Services (index pages) */
  .services {
    padding: 60px 40px;
  }

  /* Shared-CSS layouts */
  .page-header {
    padding: 50px 60px 40px;
  }
  .two-col {
    padding: 0 60px 60px;
    gap: 40px;
  }
  .expertise-cards,
  .expertise-cards-grid {
    padding: 40px 60px 60px;
    gap: 30px 40px;
  }

  /* Expertise page */
  .expertise-hero {
    padding: 50px 60px 40px;
  }
  .qualities-section {
    padding: 60px 60px;
  }

  /* Footer */
  footer {
    padding: 40px 60px;
  }

  /* Blog */
  .blog-hero {
    padding: 50px 60px 46px;
  }
  .blog-cta {
    padding: 60px 60px;
  }
  .blog-main {
    padding: 40px 60px 80px;
  }
}


/* ============================================================
   MOBILE  (≤ 767px)
   Stack all grids, show hamburger, collapse nav
   ============================================================ */
@media (max-width: 767px) {

  /* ── Hamburger button (injected by responsive.js) ── */
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    background: none;
    border: none;
    margin-left: auto;
    flex-shrink: 0;
  }
  .hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--dark);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  /* Animated X when open */
  .hamburger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .hamburger.is-open span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ── Nav ── */
  nav {
    padding: 0 20px;
    gap: 12px;
    height: 60px !important;
    position: relative;
  }
  .nav-logo {
    margin-right: auto;
  }

  /* Hide desktop nav links by default */
  .nav-links {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px 0 12px;
    background: var(--cream);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    z-index: 99;
  }
  /* When hamburger is toggled open */
  .nav-links.nav-open {
    display: flex;
  }
  .nav-links a,
  .nav-links .nav-dropdown > a {
    padding: 11px 4px;
    font-size: 15px;
    border-bottom: 1px solid rgba(29,47,42,0.07);
    display: block;
    width: 100%;
  }
  .nav-links a:last-child {
    border-bottom: none;
  }

  /* Dropdown menus: always show on mobile as flat list */
  .dropdown-menu {
    position: static;
    display: flex;
    flex-direction: column;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0 0 0 16px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    gap: 0;
  }
  .dropdown-menu a {
    font-size: 14px;
    padding: 8px 4px !important;
    color: #555 !important;
    border-bottom: 1px solid rgba(29,47,42,0.05) !important;
  }

  /* Kontakt button on mobile: smaller, stays in nav bar */
  .nav-kontakt {
    display: inline-block;
    padding: 7px 14px;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Language switcher */
  .lang-switcher {
    margin-left: 8px;
  }

  /* ── Hero (index pages) ── */
  .hero {
    padding: 40px 20px 36px;
  }
  .hero h1 {
    font-size: 32px !important;
    letter-spacing: -0.01em !important;
  }
  .hero .name {
    font-size: 14px;
  }

  /* Hero image */
  .hero-image {
    height: 260px;
  }

  /* ── About section (index pages) ── */
  .about {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .about-text {
    padding: 40px 20px 32px;
    order: 1;
  }
  .about-right {
    padding: 0 20px 40px;
    order: 2;
    align-items: center;
  }
  .about-card {
    max-width: 320px !important;
    margin: 0 auto;
  }
  .about-photo {
    height: 300px !important;
  }

  /* ── Services grid (index pages) ── */
  .services {
    padding: 40px 20px 48px;
  }
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .service-card-img {
    height: 280px !important;
  }

  /* ── Shared-CSS: page header ── */
  .page-header {
    padding: 30px 20px 24px;
  }
  .page-header h1 {
    font-size: 32px;
  }

  /* ── Shared-CSS: two-col layout ── */
  .two-col {
    grid-template-columns: 1fr !important;
    padding: 0 20px 40px !important;
    gap: 24px;
  }
  .two-col img {
    height: 280px;
    width: 100%;
    object-fit: cover;
  }

  /* ── Expertise overview page ── */
  .expertise-hero {
    padding: 30px 20px 24px;
  }
  .expertise-hero h1 {
    font-size: 32px !important;
  }
  .qualities-section {
    padding: 40px 20px;
  }
  .qualities-grid {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
  .exp-card-img {
    height: 240px !important;
  }

  /* ── Shared-CSS: expertise cards (2-col → 1-col) ── */
  .expertise-cards,
  .expertise-cards-grid {
    grid-template-columns: 1fr !important;
    padding: 30px 20px 40px;
    gap: 20px;
  }

  /* ── Shared-CSS: portrait tile (zur-person / about) ── */
  .portrait-tile-section {
    padding: 30px 20px 20px;
  }

  /* ── Blog index (aktuelles) ── */
  .blog-header {
    padding: 40px 20px 30px;
  }
  .blog-main {
    padding: 30px 20px 60px;
  }
  .blog-featured {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .blog-featured-img {
    height: 220px;
  }
  .blog-featured-body {
    padding: 24px 20px !important;
    border-left: none !important;
    border-top: 3px solid var(--copper);
  }
  .blog-featured h2 {
    font-size: 20px !important;
  }
  .blog-grid {
    grid-template-columns: 1fr !important;
  }
  .blog-filter {
    padding: 0;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ── Blog post pages ── */
  .blog-hero {
    padding: 36px 20px 30px;
  }
  .blog-hero h1 {
    font-size: 28px !important;
  }
  .blog-hero-img {
    height: 240px;
  }
  .blog-body {
    padding: 40px 0 60px;
  }
  .blog-body-inner {
    padding: 0 20px;
  }
  .blog-cta {
    padding: 40px 20px;
  }

  /* ── Footer ── */
  footer {
    padding: 36px 20px;
  }
  .footer-row-top,
  .footer-top {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  /* Keep bottom row as flex-row: addresses left, links right */
  .footer-row-bottom,
  .footer-bottom {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
  }
  .footer-addresses {
    flex-direction: column;
    gap: 16px;
  }
  .footer-links {
    align-items: flex-end;
    flex-shrink: 0;
  }
  .footer-btns {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ── Kontakt page ── */
  .kontakt-grid,
  .kontakt-layout {
    grid-template-columns: 1fr !important;
    padding: 0 20px 40px;
  }

  /* ── Tabs section (immobilienrecht etc.) ── */
  .tabs-section {
    padding: 0 20px 48px !important;
  }
  .cv-tabs {
    flex-direction: column;
    gap: 4px;
    margin-bottom: 24px;
  }
  .cv-tab {
    width: 100%;
    border-left: 1.5px solid var(--copper) !important;
    border-radius: 4px !important;
    text-align: left;
    padding: 12px 16px;
  }
  .cv-panel.active {
    padding-left: 16px;
  }

  /* ── Contact section (index / en index) ── */
  .contact-section {
    padding: 50px 20px !important;
  }

  /* ── Zur Person page ── */
  .zp-intro {
    grid-template-columns: 1fr !important;
    padding: 30px 20px 40px !important;
    gap: 32px;
  }
  .zp-sections {
    padding: 0 20px 40px !important;
  }
  .highlight-grid {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
  .highlight-box {
    padding: 40px 20px !important;
  }
  .cta-box {
    padding: 40px 20px !important;
  }

  /* ── FAQ pages (faq-immobilienrecht, faq-erbrecht etc.) ── */
  .faq-intro-section {
    grid-template-columns: 1fr !important;
  }
  .faq-intro-text {
    padding: 40px 20px 32px !important;
  }
  .faq-intro-right {
    padding: 0 20px 40px !important;
  }
  .faq-services {
    grid-template-columns: 1fr !important;
    padding: 0 20px 40px !important;
  }
  .faq-body {
    padding: 0 20px 48px !important;
  }

  /* ── Checkliste pages ── */
  .cl-intro {
    grid-template-columns: 1fr !important;
  }
  .cl-intro-text {
    padding: 40px 20px 32px !important;
  }
  .cl-intro-right {
    padding: 0 20px 40px !important;
  }
  .cl-body {
    padding: 0 20px 48px !important;
  }

  /* ── content-body (shared: tabs + text pages) ── */
  .content-body {
    padding: 0 20px 48px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── CV tabs (zur-person / about) ── */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tab-btn {
    width: 100%;
    border-radius: 4px !important;
    text-align: left;
    font-size: 14px;
    padding: 12px 16px;
    white-space: normal;
  }
}


/* ============================================================
   SMALL MOBILE  (≤ 400px)
   Fine-tuning for iPhone SE and very narrow screens
   ============================================================ */
@media (max-width: 400px) {
  .hero h1 {
    font-size: 26px !important;
  }
  .page-header h1 {
    font-size: 26px;
  }
  .blog-hero h1 {
    font-size: 24px !important;
  }
  nav {
    padding: 0 16px;
  }
}