/*
Theme Name: twentytwentyfive-child
Theme URI: 
Author: Don Ludwig
Author URI: www.thinkrepeat.com
Description: Voll Marianne based on twentytwentyfive
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfive
Text Domain: twentytwentyfive-child
Tags: 
*/

.main-nav {
  z-index: 2000!important;
}

.yellow {color: #FFCF38;}

.no-sub a {text-decoration: none!important;}

* {
  -moz-font-feature-settings: "ss01"; 
  -webkit-font-feature-settings: "ss01"; 
  font-feature-settings: "ss01";

}


/* ===========================================
   HERO-OVERLAP – dezent & responsiv
   Ziel: Bild ragt ~ 18% seiner Höhe in .header-about
   und der Text bleibt immer frei.
   =========================================== */

/* Nur auf Geräten mit „Desktop“-Layout überlappen */
@media (min-width: 1025px) {

  /* Pinker Bereich – oben harmonische Abstände */
  .header-intro {
    padding-top: clamp(40px, 6vw, 80px) !important;
  }

  /* Wie weit das Bild in Gelb ragt (vom Bild selbst gemessen) */
  :root { --hero-overlap-pct: 18%; } /* 15–20% -> z.B. 18% */

  /* Bild optisch nach unten ziehen: Prozentangaben bei translateY
     sind RELATIV zur eigenen Höhe des Elements -> perfekt für 18% */
  .header-img-area {
    position: relative;
    transform: translateY(var(--hero-overlap-pct));
    will-change: transform;
    z-index: 2; /* Bild sicher vor dem gelben Block */
  }

  /* Damit der Text im gelben Block nie unter das Bild rutscht,
     bekommt .header-about oben zusätzlichen Platz.
     Da wir die Bildhöhe per CSS nicht exakt „auslesen“ können,
     nähern wir den Raum mit einer fluiden Größe an (clamp).
     -> Bei Bedarf die drei Werte leicht nachjustieren. */
  .header-about {
    padding-top: clamp(120px, 6.5vw, 140px) !important;
  }
}

/* Auf kleineren Screens keine Überlappung */
@media (max-width: 1024px) {
  .header-img-area { transform: none !important; }
  .header-about { padding-top: var(--wp--preset--spacing--60, 0px) !important; }

  .header-intro {
    padding-top: clamp(40px, 6vw, 80px) !important;
    padding-bottom: clamp(40px, 6vw, 80px) !important;
  }

}

/* Bewegungsreduktion respektieren */
@media (prefers-reduced-motion: reduce) {
  .header-img-area { transform: none !important; }
}




/* =========================================================
   VOLLMARIANNE – INTERACTION & MOTION (FINAL)
   =========================================================
   Einheitliche Übergänge, sanftes Motion-Design und
   barrierefreundliche Fokus-Styles für Boxen, Links, Logo & Buttons.
   ========================================================= */


/* ---------------------------------------------------------
   1) VERANSTALTUNGSBOXEN (Cards)
   --------------------------------------------------------- */
.wp-block-post {
  position: relative;
  cursor: pointer;
  transform-origin: center center;
  will-change: transform, filter;
  transition:
    transform 0.7s cubic-bezier(0.25, 1, 0.5, 1),
    filter 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (hover: hover) {
  .wp-block-post:hover {
    filter: brightness(1.03);
    transform: rotate(0.4deg) scale(1.01);
  }
}

.wp-block-post:not(:hover) {
  transform: none;
  filter: none;
}

.wp-block-post:focus:not(:focus-visible),
.wp-block-post *:focus:not(:focus-visible),
.wp-block-post:active {
  outline: none !important;
  box-shadow: none !important;
}

.wp-block-post:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-2, #ff7aa2);
  outline-offset: 3px;
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(255,122,162,0.35);
}

.wp-block-post,
.wp-block-post * {
  -webkit-tap-highlight-color: transparent;
}


/* ---------------------------------------------------------
   2) LINKS – GLOBAL (ohne Farbwechsel, nur Aufhellung)
   --------------------------------------------------------- */
a {
  /* text-decoration: none; */
  transition:
    color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: color, transform;
}

@media (hover: hover) {
  a:hover {
    color: color-mix(in srgb, currentColor 88%, white 12%);
    transform: translateY(-1px);
  }
}

a:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

a:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-2, #ff7aa2);
  outline-offset: 3px;
  border-radius: 3px;
  box-shadow: 0 0 6px rgba(255,122,162,0.35);
}


/* ---------------------------------------------------------
   3) NAVIGATION (rechts oben) – smoother & Submenüs elegant
   --------------------------------------------------------- */
.site-header a,
.logo-navi a,
nav a {
  outline: none;
  box-shadow: none;
  transition:
    color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    filter 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (hover: hover) {
  .site-header a:hover,
  nav a:hover {
    color: color-mix(in srgb, currentColor 88%, white 12%);
    transform: translateY(-1px);
    text-decoration: none;
  }
}

.site-header a:focus-visible,
.logo-navi a:focus-visible,
nav a:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-2, #ff7aa2);
  outline-offset: 4px;
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(255,122,162,0.35);
}

/* Submenüs weich ein-/ausblenden */
.wp-block-navigation .wp-block-navigation__submenu-container {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition:
    opacity 0.28s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.28s cubic-bezier(0.25, 1, 0.5, 1);
}

.wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
.wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation-submenu.is-menu-open > .wp-block-navigation__submenu-container {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


/* ---------------------------------------------------------
   4) LOGO-BEREICH (.logo-navi)
   --------------------------------------------------------- */
.logo-navi .custom-logo-link {
  display: inline-block;
  transform-origin: center;
  will-change: transform, filter;
  transition:
    transform 0.7s cubic-bezier(0.25, 1, 0.5, 1),
    filter 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (hover: hover) {
  .logo-navi:hover .custom-logo-link,
  .logo-navi:focus-within .custom-logo-link {
    transform: rotate(6deg) scale(1.05);
    filter: brightness(1.1);
  }
}

.logo-navi a:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-2, #ff7aa2);
  outline-offset: 4px;
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(255,122,162,0.35);
}


/* ---------------------------------------------------------
   5) BUTTONS – Fix: Hover bleibt beige wie Original
   --------------------------------------------------------- */
.wp-element-button,
.wp-block-button__link {
  transition:
    background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: background-color, color, transform;
}

@media (hover: hover) {
  .wp-element-button:hover,
  .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--accent-3, #eebd3e); /* dein Beige */
    color: var(--wp--preset--color--contrast, #2d1653);            /* dein Dunkelviolett */
    transform: translateY(-1px);
    /* text-decoration: none; */
  }
}

.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-2, #ff7aa2);
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(255,122,162,0.35);
}


/* ---------------------------------------------------------
   6) SPEZIAL-FIX: „Hier ist Platz für dich und deine Ideen“
   --------------------------------------------------------- */
@media (hover: hover) {
  a.has-background.wp-element-button:hover {
    color: var(--wp--preset--color--base)!important;
    transform: translateY(-1px);
    /* text-decoration: none; */
  }
}