/* ============================================================
   YANWAVE – Custom CSS
   Utility-Klassen aus dem Design-Prototyp (design/*.html).
   In Elementor über „Erweitert → CSS-Klassen" nutzen.
   Tokens: style.css :root (--yw-*), Farben/Fonts zusätzlich als
   Elementor Global Colors/Fonts gepflegt.
   ============================================================ */

/* ── 1. Typografie-Utilities ─────────────────────────────── */

/* Kicker/Label: Archivo 500, Versalien, weite Laufweite */
.yw-label,
.label{
  font-family:var(--yw-font-display) !important;
  font-weight:500 !important;
  font-size:var(--yw-fs-label) !important;
  text-transform:uppercase !important;
  letter-spacing:.26em !important;
  color:var(--yw-muted) !important;
}

/* Serif-Akzent: genau EIN Wort pro Headline, schwarz, italic */
.serif,
.yw-serif{
  font-family:var(--yw-font-serif) !important;
  font-style:italic !important;
  font-weight:400 !important;
}

/* Headline-Grundschnitt (Elementor-Headings mit Klasse) */
.yw-h Display,
.yw-h .elementor-heading-title,
h1.yw-h, h2.yw-h, h3.yw-h{
  font-family:var(--yw-font-display);
  font-weight:300;
  letter-spacing:-.015em;
  line-height:1.04;
}
.yw-h--hero .elementor-heading-title{font-size:var(--yw-fs-hero)}
.yw-h--h2 .elementor-heading-title{font-size:var(--yw-fs-h2)}
.yw-h--h3 .elementor-heading-title{font-size:var(--yw-fs-h3)}
.yw-h--cta .elementor-heading-title{font-size:clamp(2.5rem,7vw,5.5rem)}

/* Lead-Absatz */
.yw-lead,
.yw-lead p{
  font-size:var(--yw-fs-lead);
  color:var(--yw-ink);
  line-height:1.5;
}
.yw-muted, .yw-muted p{color:var(--yw-muted)}

/* ── 2. Buttons (auf Elementor-Button-Widget legen) ──────── */
.yw-btn .elementor-button{
  display:inline-flex;align-items:center;gap:.8em;
  font-family:var(--yw-font-display);font-weight:500;
  font-size:var(--yw-fs-label);text-transform:uppercase;letter-spacing:.2em;
  padding:1.1em 1.8em;border:1px solid var(--yw-ink);border-radius:0;
  background:var(--yw-ink);color:var(--yw-bg);transition:.3s;
}
.yw-btn .elementor-button:hover,
.yw-btn .elementor-button:focus{background:transparent;color:var(--yw-ink)}
.yw-btn--ghost .elementor-button{background:transparent;color:var(--yw-ink)}
.yw-btn--ghost .elementor-button:hover,
.yw-btn--ghost .elementor-button:focus{background:var(--yw-ink);color:var(--yw-bg)}

/* ── 3. Header / Topbar (Theme-Builder-Header) ───────────── */
.yw-header{background:var(--yw-bg);border-bottom:1px solid var(--yw-line)}

/* Topbar: links Nav · Logo mittig · rechts Nav+Icon (1fr|auto|1fr). */
.yw-topbar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:1.5rem;padding:1.1rem var(--yw-px);
}
.yw-topbar__left{justify-self:start;display:flex;gap:1.8rem;align-items:center}
.yw-topbar__logo{justify-self:center;display:inline-flex;color:var(--yw-ink);line-height:0}
.yw-topbar__right{justify-self:end;display:flex;gap:1.6rem;align-items:center}
.yw-topbar__left a,
.yw-topbar__link{
  font-family:var(--yw-font-display);font-weight:500;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.16em;color:var(--yw-ink);opacity:.7;
  text-decoration:none;transition:opacity .2s;
}
.yw-topbar__left a:hover,.yw-topbar__link:hover{opacity:1}
/* Anfrage: Serif-Italic, unterstrichen (Referenz „Inquire"), prominent. */
.yw-topbar__anfrage{
  font-family:var(--yw-font-serif);font-style:italic;font-size:1.2rem;
  color:var(--yw-ink) !important;line-height:1;
  /* !important, weil Hello Elementor a{text-decoration:none!important} setzt. */
  text-decoration-line:underline !important;
  text-underline-offset:3px;text-decoration-thickness:1px;
}
.yw-topbar__anfrage:hover{text-decoration-thickness:1.5px}

/* Menü-Icon: EIN Button, morpht per CSS Hamburger→X. Kein Pink-Hover
   (Hello-reset überschreiben). z-index über dem Overlay → bleibt als X sichtbar. */
.yw-burger,
.yw-burger:hover,
.yw-burger:focus,
.yw-burger:active{
  position:relative;z-index:9999;
  display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;
  width:32px;height:32px;padding:0;-webkit-appearance:none;appearance:none;
  border:0 !important;border-radius:0 !important;box-shadow:none !important;
  background:none !important;background-color:transparent !important;color:var(--yw-ink) !important;cursor:pointer;
}
.yw-burger__bar{
  display:block;width:26px;height:1.5px;background:currentColor;
  transition:transform .3s ease;transform-origin:center;
}
.yw-burger[aria-expanded="true"] .yw-burger__bar:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.yw-burger[aria-expanded="true"] .yw-burger__bar:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}
@media(max-width:900px){
  /* Mobil: Split-Nav aus → Logo links, Menü-Icon rechts. Overlay navigiert. */
  .yw-topbar{grid-template-columns:1fr auto;gap:.75rem}
  .yw-topbar__left{display:none}
  .yw-topbar__logo{justify-self:start}
  .yw-topbar__right{gap:1rem}
  .yw-topbar__link,.yw-topbar__anfrage{display:none}
}

/* ── Vollflächiges Overlay-Menü ── */
.yw-menu-overlay{
  position:fixed;inset:0;z-index:9998;background:var(--yw-ph);
  opacity:0;visibility:hidden;
  /* visibility mit transitionen, sonst verschwindet der Inhalt sofort und
     der Fade-Out ist unsichtbar. */
  transition:opacity .35s ease, visibility .35s ease;
  overflow-y:auto;
}
.yw-menu-overlay.is-open{opacity:1;visibility:visible}
.yw-menu-overlay__close{
  position:absolute;top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2.5rem);z-index:2;
  width:44px;height:44px;border:0;background:none;color:var(--yw-ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.yw-menu-overlay__close svg{width:26px;height:26px}
.yw-menu-overlay__inner{
  min-height:100%;display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:clamp(2rem,6vw,6rem);padding:clamp(3rem,8vw,6rem) clamp(1.5rem,6vw,7rem);
}
.yw-menu-overlay__aside{max-width:34ch}
/* Portrait-Bild-Platzhalter mit kreisendem Badge übers linke obere Eck. */
.yw-menu-overlay__figure{position:relative;margin:2.2rem 0 1.8rem}
.yw-menu-overlay__photo{aspect-ratio:4/5;background:var(--yw-ph);overflow:hidden;border:1px solid var(--yw-line)}
.yw-menu-overlay__photo img{width:100%;height:100%;object-fit:cover;display:block}
.yw-menu-overlay__badge{position:absolute;top:-34px;left:-34px;z-index:2;background:var(--yw-ph);border-radius:50%}
.yw-menu-overlay__tag{color:var(--yw-muted);font-size:var(--yw-fs-body);line-height:1.6;margin:0 0 1.6rem}
.yw-menu-overlay__social{
  display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;
  font-family:var(--yw-font-display);font-weight:500;font-size:var(--yw-fs-label);
  letter-spacing:.16em;text-transform:uppercase;color:var(--yw-muted);
}
.yw-menu-overlay__social a{color:var(--yw-ink);text-decoration:none;opacity:.8}
.yw-menu-overlay__social a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.yw-menu-overlay__nav{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(.35rem,1.2vw,.9rem)}
.yw-menu-overlay__item{
  display:inline-flex;align-items:flex-start;gap:.6rem;text-decoration:none;
  color:var(--yw-ink);line-height:1;transition:opacity .2s;
}
.yw-menu-overlay__num{
  font-family:var(--yw-font-display);font-weight:500;font-size:.72rem;
  padding-top:.5em;color:var(--yw-muted);letter-spacing:.1em;
}
.yw-menu-overlay__label{
  font-family:var(--yw-font-display);font-weight:300;letter-spacing:-.01em;line-height:1.05;
  font-size:clamp(2rem,5vw,4rem);text-transform:uppercase;
}
.yw-menu-overlay__item:hover{opacity:.5}
/* Serif-Akzent (z.B. „Anfrage"): kursiv, Groß-/Kleinschreibung, gleiche Größe. */
.yw-menu-overlay__item--accent .yw-menu-overlay__label{
  font-family:var(--yw-font-serif);font-style:italic;font-weight:400;text-transform:none;
}
@media(max-width:820px){
  .yw-menu-overlay__inner{grid-template-columns:1fr;align-content:center;gap:2.5rem}
  .yw-menu-overlay__aside{order:2;max-width:none}
  .yw-menu-overlay__nav{order:1}
}
@media(prefers-reduced-motion:reduce){.yw-menu-overlay{transition:none}}
html.yw-menu-open{overflow:hidden}

/* ── 4. Foto-Helfer ──────────────────────────────────────── */
.yw-photo img{width:100%;height:100%;object-fit:cover;display:block}
.yw-ratio-45{aspect-ratio:4/5;overflow:hidden;background:var(--yw-ph)}
.yw-ratio-11{aspect-ratio:1;overflow:hidden;background:var(--yw-ph)}
.yw-ratio-34{aspect-ratio:3/4;overflow:hidden;background:var(--yw-ph)}
.yw-ratio-43{aspect-ratio:4/3;overflow:hidden;background:var(--yw-ph)}
.yw-ratio-45 img,.yw-ratio-11 img,.yw-ratio-34 img,.yw-ratio-43 img{
  width:100%;height:100%;object-fit:cover;
}

/* Badge auf Foto (Hero): Elementor-Container mit .yw-hero-badge */
.yw-hero-badge{position:absolute;left:-40px;bottom:-40px;z-index:2}
@media(max-width:900px){.yw-hero-badge{left:-8px;bottom:-24px}}

/* ── 5. Kennzahlen (Über-Teaser) ─────────────────────────── */
.yw-stats{
  display:flex;gap:clamp(1.5rem,4vw,3rem);
  border-top:1px solid var(--yw-line);padding-top:1.6rem;
}
.yw-stats .yw-stat-n{
  font-family:var(--yw-font-display);font-weight:300;
  font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.1;
}
.yw-stats .yw-stat-c{
  font-family:var(--yw-font-display);font-weight:500;
  font-size:var(--yw-fs-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--yw-muted);margin-top:.4rem;
}

/* ── 6. Zitat / Testimonial ──────────────────────────────── */
/* NUR das Zitat groß setzen (nicht das Kicker-Label / die Namenszeile).
   Größe/Weight kommen aus .yw-h--h2; hier nur Zitat-spezifische Feinheiten. */
.yw-quote{text-align:center}
.yw-quote .yw-h--h2 .elementor-heading-title{
  line-height:1.2;letter-spacing:-.015em;
  max-width:24ch;margin-inline:auto;
}
.yw-quote-name .elementor-heading-title{
  font-family:var(--yw-font-display);font-weight:500;
  font-size:var(--yw-fs-label);letter-spacing:.2em;
  text-transform:uppercase;color:var(--yw-muted);line-height:1.4;
}
.yw-quote-name{margin-top:1.5rem}

/* ── 7. CTA-Band ─────────────────────────────────────────── */
.yw-cta{border-top:1px solid var(--yw-ink)}

/* ── 8. Footer (dunkel) ──────────────────────────────────── */
.yw-foot{background:var(--yw-ink);color:var(--yw-bg)}
.yw-foot .yw-brand,
.yw-foot .yw-brand .elementor-heading-title{color:var(--yw-bg);font-size:1.6rem}
.yw-foot .yw-foot-tag{color:#B9B6B1;font-size:var(--yw-fs-small);max-width:28ch}
.yw-foot h4,
.yw-foot .yw-foot-h .elementor-heading-title{
  font-family:var(--yw-font-display);font-weight:500;
  font-size:var(--yw-fs-label);letter-spacing:.2em;
  text-transform:uppercase;color:#B9B6B1;
}
.yw-foot a{color:var(--yw-bg);opacity:.85;font-size:var(--yw-fs-small);text-decoration:none}
.yw-foot a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.yw-foot .yw-foot-menu ul{list-style:none;margin:0;padding:0}
.yw-foot .yw-foot-menu li{padding:.3rem 0}
.yw-foot-bottom{
  border-top:1px solid #2A2724;color:#8C8984;font-size:var(--yw-fs-small);
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.5rem;
}
.yw-foot-bottom p{margin:0;color:#8C8984}

/* Setup-Liste (Über-Seite): nummerierte Ausstattungsliste */
.yw-setup-list ul{list-style:none;margin:0;padding:0}
.yw-setup-list li{
  display:flex;gap:1.2rem;align-items:baseline;
  padding:1rem 0;border-bottom:1px solid var(--yw-line);
  font-size:var(--yw-fs-body);
}
.yw-setup-list li > span:first-child{
  font-family:var(--yw-font-display);font-weight:500;
  font-size:var(--yw-fs-label);letter-spacing:.16em;color:var(--yw-muted);
}

/* FAQ (Accordion-Widget → editorial) */
.yw-faq .elementor-accordion-item{
  border:0 !important;border-bottom:1px solid var(--yw-line) !important;
  border-radius:0 !important;
}
.yw-faq .elementor-tab-title{
  font-family:var(--yw-font-display);font-weight:600;
  font-size:var(--yw-fs-body);padding:1.2rem 0 !important;
  background:none !important;color:var(--yw-ink) !important;
}
.yw-faq .elementor-tab-content{
  border:0 !important;padding:0 0 1.4rem !important;color:var(--yw-muted);
}

/* Artikel-Leselayout (Journal-Single) */
.yw-article{max-width:720px;margin-inline:auto}
.yw-article .yw-lead-p{font-size:var(--yw-fs-lead);line-height:1.55}
.yw-article blockquote{
  border:0;margin:2.5rem 0;padding:0;
  font-family:var(--yw-font-display);font-weight:300;
  font-size:var(--yw-fs-h3);line-height:1.25;letter-spacing:-.015em;
}

/* ── 9. Journal-Karten (Pro-Posts-Widget → editorial) ────── */
.yw-posts .elementor-posts-container{
  display:grid !important;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2.5vw,1.75rem);
}
.yw-posts article.elementor-post{
  border:0;box-shadow:none;background:none;border-radius:0;
}
.yw-posts .elementor-post__thumbnail{aspect-ratio:4/3;background:var(--yw-ph)}
.yw-posts .elementor-post__thumbnail img{width:100%;height:100%;object-fit:cover}
.yw-posts .elementor-post__badge{
  position:static;display:inline-block;margin:.8rem 0 0;padding:0;
  background:none;border-radius:0;
  font-family:var(--yw-font-display);font-weight:500;
  font-size:var(--yw-fs-label);letter-spacing:.2em;
  text-transform:uppercase;color:var(--yw-muted);
}
.yw-posts .elementor-post__title,
.yw-posts .elementor-post__title a{
  font-family:var(--yw-font-display);font-weight:400;
  font-size:var(--yw-fs-h3);line-height:1.15;color:var(--yw-ink);margin:.4rem 0 .5rem;
}
.yw-posts .elementor-post__title a:hover{text-decoration:underline;text-underline-offset:4px}
.yw-posts .elementor-post__meta-data{
  font-size:var(--yw-fs-small);color:var(--yw-muted);
}
.yw-posts .elementor-post__excerpt p{
  font-size:var(--yw-fs-small);color:var(--yw-muted);
}
@media(max-width:900px){.yw-posts .elementor-posts-container{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.yw-posts .elementor-posts-container{grid-template-columns:1fr}}

/* ── 10. Formular (Pro Forms → editorial) ────────────────── */
.yw-form .elementor-field-group .elementor-field{
  border:0;border-bottom:1px solid var(--yw-line);border-radius:0;
  background:transparent;padding:.9em 0;
  font-family:var(--yw-font-body);font-size:var(--yw-fs-body);color:var(--yw-ink);
}
.yw-form .elementor-field-group .elementor-field:focus{
  border-bottom-color:var(--yw-ink);outline:none;box-shadow:none;
}
.yw-form .elementor-field-label{
  font-family:var(--yw-font-display);font-weight:500;
  font-size:var(--yw-fs-label);letter-spacing:.2em;
  text-transform:uppercase;color:var(--yw-muted);
}
.yw-form .elementor-button[type="submit"]{
  font-family:var(--yw-font-display);font-weight:500;
  font-size:var(--yw-fs-label);text-transform:uppercase;letter-spacing:.2em;
  padding:1.1em 1.8em;border:1px solid var(--yw-ink);border-radius:0;
  background:var(--yw-ink);color:var(--yw-bg);transition:.3s;
}
.yw-form .elementor-button[type="submit"]:hover{background:transparent;color:var(--yw-ink)}

/* ── 11. Layout-Helfer ───────────────────────────────────── */
.yw-section{padding:var(--yw-py) var(--yw-px)}
.yw-section--flush-top{padding-top:0}
.yw-section--nav{padding:1.15rem var(--yw-px)}
/* Fullwidth-Farbband im Foto-Platzhalter-Ton (z.B. Live-Momente-Sektion). */
.yw-section--paper{background:var(--yw-ph)}
.yw-relative{position:relative}
:focus-visible{outline:2px solid var(--yw-ink);outline-offset:3px}
.yw-hairline-top{border-top:1px solid var(--yw-ink)}
.yw-hairline{border-top:1px solid var(--yw-line)}