/* =========================
   HEADER
   ========================= */

.site-header{
  transition: box-shadow 220ms ease;
}

/* Wird per JS gesetzt */
.site-header.is-scrolled{
  box-shadow: 0 6px 12px rgba(0,0,0,0.06);
}

.is-logo-animate {
  animation: logo-breathe 1200ms cubic-bezier(.4,0,.2,1);
}

/* =========================================
   Hero Logo – durchgehende ruhige Bewegung
   ========================================= */

@keyframes hero-logo-float {
  0%   { transform: scale(0.98); }
  50%  { transform: scale(1.00); }
  100% { transform: scale(0.98); }
}

.c-hero__logo {
  transform-origin: center;
  animation: hero-logo-float 6s cubic-bezier(.4,0,.2,1) infinite;
  will-change: transform;
}

/* Falls Bild im Wrapper liegt */
.c-hero__logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Barrierefreiheit */
@media (prefers-reduced-motion: reduce){
  .c-hero__logo {
    animation: none !important;
  }
}

/* ===========================
   REVEAL (wie im Beispiel)
=========================== */





/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html.reveal-on .reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}



/* 1) Einheitliche Transition fürs Icon */
.c-btn__icon{
  transition: transform 220ms cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

/* 2) Wenn ein Button den Pfeil als ::before-Maske baut */
.c-btn--form::before,
.c-form .ff-btn::before,
.c-form button[type="submit"]::before,
.c-form input[type="submit"]::before{
  transition: transform 220ms cubic-bezier(.4,0,.2,1);
  will-change: transform;
  display: inline-block; /* wichtig, damit transform wirkt */
}

.c-btn{
  transition: transform 0.5s cubic-bezier(.4,0,.2,1);
}

/* 3) Hover: Button leicht hoch */
.c-btn:hover{
  transform: translateY(-2px);
  text-decoration: none;
}

/* 4) Hover: Icon nach rechts (normal) */
.c-btn:hover .c-btn__icon{
  transform: translateX(2px);
}

/* 5) Hover: pseudo-icon nach rechts */
.c-btn--form:hover::before,
.c-form .ff-btn:hover::before,
.c-form button[type="submit"]:hover::before,
.c-form input[type="submit"]:hover::before{
  transform: translateX(2px);
}

/* 6) Hero-CTA: rotate beibehalten UND trotzdem nach rechts schieben */
.c-hero__cta .c-btn__icon{
  transform: rotate(180deg) translateX(0);
}
.c-hero__cta:hover .c-btn__icon{
  transform: rotate(180deg) translateX(2px);}


/* BACK BUTTON – Startzustand */
.c-btn--back .c-btn__icon{
  transform: rotate(180deg) translateX(0);
  transition: transform 200ms cubic-bezier(.4,0,.2,1);
}

/* Hover */
.c-btn--back:hover .c-btn__icon{
  transform: rotate(180deg) translateX(2px);
}

/* Basis */
.c-post-nav__icon{
  transition: transform 200ms cubic-bezier(.4,0,.2,1);
  transform: translateX(0);
}

/* PREV dauerhaft drehen */
.c-post-nav__item--prev .c-post-nav__icon{
  transform: rotate(180deg) translateX(0);
}

/* Hover: nur Bewegung */
.c-post-nav__link:hover .c-post-nav__icon{
  transform: translateX(2px);
}

/* Hover + prev: Rotation beibehalten */
.c-post-nav__item--prev .c-post-nav__link:hover .c-post-nav__icon{
  transform: rotate(180deg) translateX(2px);
}


/* =========================================
   Offer Toggle Icon: Hover-Bounce
   ========================================= */

@keyframes toggle-bounce-y {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(2px); }
  100% { transform: translateY(0); }
}

/* Nur auf Hover-Geräten */
@media (hover:hover) and (pointer:fine){
  .c-offer__summary:hover .c-offer__toggle-icon{
    animation: toggle-bounce-y 420ms cubic-bezier(.4,0,.2,1);
  }
}

/* Tastatur-Fokus ebenfalls */
.c-offer__summary:focus-visible .c-offer__toggle-icon{
  animation: toggle-bounce-y 420ms cubic-bezier(.4,0,.2,1);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .c-offer__summary:hover .c-offer__toggle-icon,
  .c-offer__summary:focus-visible .c-offer__toggle-icon{
    animation: none !important;
  }
}

@media (hover:hover) and (pointer:fine){
  .c-offer__summary:hover .c-offer__toggle-icon{
    animation: toggle-bounce-y 1000ms cubic-bezier(.4,0,.2,1) infinite;
  }
}

/* =========================================
   MailPoet Submit Hover
   ========================================= */

input.mailpoet_submit {
  transition:
    transform 180ms cubic-bezier(.4,0,.2,1),
    box-shadow 180ms cubic-bezier(.4,0,.2,1);
}

/* Nur Desktop Hover */
@media (hover:hover) and (pointer:fine){
  input.mailpoet_submit:hover {
    transform: translateY(-2px);
    transition: transform 0.5s cubic-bezier(.4,0,.2,1);
  }
}

/* Tastatur-Fokus */
input.mailpoet_submit:focus-visible {
  transform: translateY(-2px);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  input.mailpoet_submit {
    transition: none !important;
  }
}

/* Basis */
.c-offers__search-icon {
  transform: translateY(-50%) rotate(0deg);
  transform-origin: center;
  transition: transform 220ms cubic-bezier(.4,0,.2,1);
}

/* Hover */
.c-offers__search:hover .c-offers__search-icon,
.c-offers__search:focus-within .c-offers__search-icon {
  transform: translateY(-50%) rotate(90deg);
}





/* Bild-Frame */
.c-post-card__media{
  overflow: hidden;
}

/* Bild */
.c-post-card__image{
  display: block;
  width: 100%;
  height: auto;

  transform: scale(1);
  transition: transform .35s ease;
  will-change: transform;
}

/* Zoom bei Card-Hover oder Overlay-Link-Hover */
.c-post-card:hover .c-post-card__image,
.c-post-card__stretched:hover ~ .c-post-card__media .c-post-card__image{
    filter: grayscale(0);
}

.c-post-card__cta{
  transition: transform .25s ease;
}

.c-post-card__cta .c-btn__icon{
  transform: translateX(0);
  transition: transform .25s ease;
  will-change: transform;
}

.c-post-card__cta:hover{
  transform: translateY(-2px);
  text-decoration: none;
}

.c-post-card__cta:hover .c-btn__icon{
  transform: translateX(2px);
}

.c-post-card{ position: relative; }

.c-post-card__stretched{
  position: absolute;
  inset: 0;
  z-index: 10;
  display: block;
  cursor: pointer;
}

.c-post-card__title a,
.c-post-card__cta{
  position: relative;
  z-index: 11;
}

@supports (-webkit-touch-callout: none){
  .c-post-card__title,
  .c-post-card__title a{
    transform: none !important;
    will-change: auto !important;
  }
}

/* iOS Safari: Fix für Umlaute bei Custom-Fonts + Compositing */
@supports (-webkit-touch-callout: none){
  /* 1) Reveal auf Text/Card abschalten (weil es Layering triggert) */
  .c-post-card.reveal,
  .c-post-card__body.reveal,
  .c-post-card__head.reveal,
  .c-post-card__title.reveal,
  .c-post-card__excerpt.reveal{
    opacity: 1 !important;
    transition: none !important;
  }

  /* 2) Zusätzlich: kein will-change/transform auf Textkette */
  .c-post-card,
  .c-post-card__body,
  .c-post-card__head,
  .c-post-card__title,
  .c-post-card__title a,
  .c-post-card__excerpt{
    transform: none !important;
    will-change: auto !important;
    filter: none !important;
  }

  /* 3) Bild darf weiterhin transformieren (Zoom bleibt) */
  .c-post-card__image{
    will-change: transform;
  }
}

/* iOS Safari: Umlaute fix (Custom Font + transform layer) */
@supports (-webkit-touch-callout: none){
  /* Kein transform/will-change auf Text-Containern */
  html.reveal-on .reveal,
  html.reveal-on .reveal--move{
    transform: none !important;
    will-change: auto !important;
  }
}

/* Post-Block Headlines: Umlaute auf iOS nicht abschneiden */
.c-post__title,
.c-post__title * {
  line-height: 1.1;         /* statt 0.9/1 */
  overflow: visible;
}

/* falls ein Reveal/Animation-Wrapper existiert */
.c-post__title-wrap,
.c-post__card,
.c-post__link {
  overflow: visible;         /* testweise */
}



/* Default: nichts verstecken */
.reveal{
  opacity: 1;
  transform: none;
  transition: none;
}

/* Erst wenn JS aktiv ist, “echter” Reveal */
html.reveal-on .reveal{
  opacity: 0;
  transition: opacity 520ms cubic-bezier(.4,0,.2,1);
}

html.reveal-on .reveal--move{
  transform: translateY(22px);
  transition:
    opacity 520ms cubic-bezier(.4,0,.2,1),
    transform 520ms cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

html.reveal-on .reveal.reveal--visible{
  opacity: 1;
}

html.reveal-on .reveal--move.reveal--visible{
  transform: translateY(0);
}