/*
Theme Name: The7 Child - Contrast
Template: dt-the7
Version: 3.3.5
*/

body {
    background-color: #000;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    margin: 0;
}

.logo-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    padding: 40px 20px 20px 20px;
}

.logo-overlay img {
    max-height: 60px;
    height: auto;
    width: auto;
}

.nav-toggle {
    position: fixed;
    top: 40px;
    right: 20px;
    z-index: 10001;
    display: block;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 28px;
    height: 3px;
    background: white;
    margin: 6px 0;
}

.nav-contrast-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;
    height: 100vh;
    width: 250px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    background: transparent;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

.nav-contrast-wrapper.active {
    transform: translateX(0);
}

.nav-contrast {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background: transparent !important;
    padding: 0 0px;
}

.nav-contrast .menu-item {
    list-style: none;
    width: 100%;
}

.nav-contrast .menu-item a {
    display: block;
    background: #fff;
    color: #000;
    padding: 14px 20px 14px 0;
    margin-bottom: 16px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    border: none;
    text-align: right;
    box-sizing: border-box;
    transition: all 0.3s ease;
    width: 100%;
}

.nav-contrast .menu-item:last-child a {
    margin-bottom: 0;
}

.nav-contrast a:hover {
    background: #000;
    color: #fff;
}

.contrast-content {
    width: 100%;
}

/* === RB Responsive Type v2 (stable) === */

/* iOS Text-Scaling stabilisieren */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Baseline: Headlines schneiden nie, skalieren flüssig */
:root{
  --rb-h1-min: 1.8rem; --rb-h1-max: 5.6rem;
  --rb-h2-min: 1.7rem; --rb-h2-max: 4.0rem;
  --rb-h3-min: 1.6rem; --rb-h3-max: 3.2rem;
  --rb-body-min: 1.55rem; --rb-body-max: 1.9rem;
}

h1, h2, h3,
.elementor-widget-heading .elementor-heading-title { line-height: 1.15 !important; overflow: visible !important; white-space: normal !important; text-wrap: balance; hyphens: auto; letter-spacing: normal;
}

/* Flüssige Typo via clamp: erst kleiner, dann (wenn nötig) umbrechen */
h1, /* Removed Elementor clamp to let widget control size */
/* Keep global h2 clamp (no !important); Elementor Headings not targeted */
h2 { font-size: clamp(var(--rb-h2-min), 3.4vw, var(--rb-h2-max));
}
h3, /* Removed Elementor clamp to let widget control size */
body, p, li { font-size: clamp(var(--rb-body-min), 1vw + 0.7rem, var(--rb-body-max)); }

/* Container: niemals Text abschneiden */
.masthead, .page-title, .title-wrap, .fancy-title-wrap,
.elementor-widget-heading, .header-bar, .logo-box { overflow: visible !important; }

/* Feste Höhen auf Mobile vermeiden */
@media (max-width: 1024px) {
  .elementor-section, .vc_row, .page-title, .fancy-title,
  .rb-hero, .full-height-section, .fit-to-screen { height: auto !important; min-height: auto !important; }
}

/* 100vh → 100dvh (Mobile Browser UI) */
@supports (height: 100dvh) {
  .rb-100vh, .rb-hero, .full-height-section, .fit-to-screen {
    min-height: 100dvh !important; height: auto !important;
  }
}

/* “No-Reflow” für Headlines in responsiven Boxen */
.rb-hd { container-type: inline-size; }
.rb-hd .rb-title {
  /* Erst Schrift verkleinern, dann umbrechen */
  font-size: clamp(var(--rb-min, 1.6rem), 5.2vw, var(--rb-max, 5.4rem));
  line-height: 1.15; margin: 0; text-wrap: balance;
}
/* feinere Skalierung in engeren Containern */
@container (max-width: 700px)  { .rb-hd .rb-title { font-size: clamp(var(--rb-min,1.6rem), 6vw, var(--rb-max,5.4rem)); } }
@container (max-width: 520px)  { .rb-hd .rb-title { font-size: clamp(var(--rb-min,1.6rem), 6.8vw, var(--rb-max,5.4rem)); } }

/* Letzte Eskalationsstufe auf sehr schmalen Screens */
@media (max-width: 420px){
  .rb-hd .rb-title { overflow-wrap: anywhere; hyphens: auto; }
}

/* Optional: harmonische Zeilenlänge */
.rb-hd .rb-title { max-width: 28ch; }
@container (max-width: 680px){ .rb-hd .rb-title { max-width: 26ch; } }
@container (max-width: 520px){ .rb-hd .rb-title { max-width: 24ch; } }

/* v3.3.5 guard: ensure no clamp persists on h1/h2 */
h1, h2 { /* font-size reset only if clamp slipped earlier; leave unset so Elementor/Global styles apply */ }