/* Reitanlage Giershausen – gemeinsames Design + Animationen */

:root {
  --blue:#0b2f86;
  --blue-dark:#06215f;
  --blue-soft:#eaf1ff;
  --light:#f4f8ff;
  --white:#ffffff;
  --text:#1f2937;
  --muted:#5f6b7a;
  --shadow:0 18px 45px rgba(11,47,134,.12);
  --shadow-soft:0 14px 35px rgba(11,47,134,.08);
  --radius:18px;
  --max:1180px;
}

html { scroll-behavior:smooth; }
body { margin:0; font-family:Arial,sans-serif; color:var(--text); background:#fff; }
* { box-sizing:border-box; }
img { max-width:100%; display:block; }
a { color:inherit; }
h1,h2,h3 { font-family:Georgia,serif; color:var(--blue); margin:0 0 16px; }
h1 { font-size:clamp(46px,6vw,76px); line-height:.95; }
h2 { font-size:clamp(36px,4vw,50px); }
h3 { font-size:30px; }
p { font-size:17px; line-height:1.8; }
ul { padding-left:20px; }

.site-header { position:sticky; top:0; z-index:100; background:#fff; box-shadow:0 8px 25px rgba(11,47,134,.08); }
.site-nav { max-width:var(--max); margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo-small { width:82px; height:auto; }
.menu { display:flex; gap:20px; align-items:center; font-weight:600; color:var(--blue); }
.menu a { text-decoration:none; }
.menu a:hover,.menu a.active { color:var(--blue-dark); }
.menu-button { background:var(--blue); color:#fff!important; padding:11px 18px; border-radius:10px; }

.hero {
  background:
    linear-gradient(90deg,rgba(255,255,255,.96),rgba(255,255,255,.74),rgba(255,255,255,.15)),
    url("https://reitanlage-giershausen.de/Pferd_1.png");
  background-size:cover;
  background-position:center;
  padding:105px 8%;
  min-height:530px;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.hero-inner { max-width:780px; }
.logo-hero { width:130px; height:auto; margin-bottom:35px; }
.subline { font-size:clamp(22px,3vw,30px); color:var(--blue); font-family:Georgia,serif; font-style:italic; max-width:720px; margin-bottom:28px; }
.script { font-family:Georgia,serif; font-style:italic; color:var(--blue); font-size:26px; margin-bottom:4px; }

.section { padding:85px 8%; overflow:hidden; }
.section-light { background:var(--light); }
.wrap { max-width:var(--max); margin:0 auto; }
.center { text-align:center; max-width:900px; margin:0 auto; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:55px; align-items:center; }
.three-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:42px; }
.three-grid1 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:42px; }
.four-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin-top:42px; }

.card { background:#fff; border-radius:var(--radius); padding:32px; box-shadow:var(--shadow-soft); transition:transform .35s ease, box-shadow .35s ease; }
.card:hover { transform:translateY(-8px); box-shadow:0 30px 80px rgba(11,47,134,.15); }
.card-image { padding:0; overflow:hidden; }
.card-image img { width:100%; height:280px; object-fit:cover; object-position:center; }
.card-content { padding:28px; }
.icon { font-size:42px; color:var(--blue); margin-bottom:12px; }
.image { width:100%; height:430px; object-fit:contain; object-position:center; border-radius:var(--radius); box-shadow:var(--shadow); transition:transform .35s ease, box-shadow .35s ease; }

.button { display:inline-block; background:var(--blue); color:#fff!important; padding:15px 28px; border-radius:10px; text-decoration:none; font-weight:700; margin-top:12px; }
.button:hover { background:var(--blue-dark); }
.button-secondary { background:#fff; color:var(--blue)!important; border:2px solid var(--blue); margin-left:10px; }
.button-secondary:hover { background:var(--blue-soft); }

.check-list { list-style:none; padding:0; margin:26px 0 0; }
.check-list li { padding:12px 0; border-bottom:1px solid #e4ebf8; font-size:16px; }
.check-list li::before { content:"✓"; color:var(--blue); font-weight:800; margin-right:10px; }
.note { background:#fff; border-left:6px solid var(--blue); padding:28px; border-radius:14px; box-shadow:var(--shadow-soft); margin-top:30px; line-height:1.7; }

.animal-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; max-width:var(--max); margin:50px auto 0; }
.animal-card { background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft); transition:transform .35s ease, box-shadow .35s ease; }
.animal-card:hover { transform:translateY(-8px); box-shadow:0 30px 80px rgba(11,47,134,.15); }
.animal-card img { width:100%; height:300px; object-fit:cover; object-position:center; }
.animal-content { padding:28px; }
.meta { color:var(--blue); font-weight:600; margin-bottom:14px; }
.badge-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.badge { background:var(--light); color:var(--blue); padding:7px 12px; border-radius:999px; font-size:13px; font-weight:600; }

.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:42px; }
.faq-item { background:#fff; border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-soft); transition:transform .35s ease, box-shadow .35s ease; }
.faq-item:hover { transform:translateY(-6px); box-shadow:0 26px 70px rgba(11,47,134,.13); }
.faq-item h3 { font-size:25px; }

.contact-band { background:var(--blue); color:#fff; text-align:center; padding:70px 8%; overflow:hidden; }
.contact-band h2 { color:#fff; }
.contact-band p { max-width:760px; margin:0 auto 22px; }
.contact-band .button { background:#fff; color:var(--blue)!important; }
.contact-band .button:hover { background:var(--blue-soft); }

.site-footer { background:#fff; color:var(--blue); text-align:center; padding:28px 20px; font-size:14px; }
.site-footer a { color:var(--blue); text-decoration:none; font-weight:600; }

/* Animationen */
.reveal,.reveal-left,.reveal-right {
  opacity:0;
  transition:opacity .9s ease, transform .9s ease;
  will-change:opacity, transform;
}
.reveal { transform:translateY(36px); }
.reveal-left { transform:translateX(-44px); }
.reveal-right { transform:translateX(44px); }
.reveal.is-visible,.reveal-left.is-visible,.reveal-right.is-visible { opacity:1; transform:none; }
.delay-1 { transition-delay:.12s; }
.delay-2 { transition-delay:.24s; }
.delay-3 { transition-delay:.36s; }
.delay-4 { transition-delay:.48s; }

.hero .logo-hero,.hero h1,.hero .subline,.hero .button {
  animation:heroFadeUp .9s ease both;
}
.hero h1 { animation-delay:.12s; }
.hero .subline { animation-delay:.24s; }
.hero .button { animation-delay:.36s; }

@keyframes heroFadeUp {
  from { opacity:0; transform:translateY(28px); }
  to { opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
  .reveal,.reveal-left,.reveal-right { opacity:1; transform:none; }
}

@media(max-width:1000px) {
  .menu { gap:14px; font-size:14px; }
  .four-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(max-width:900px) {
  .menu { display:none; }
  .hero { padding:70px 24px; min-height:460px; }
  .section { padding:65px 24px; }
  .two-col,.three-grid,.four-grid,.animal-grid,.faq-grid { grid-template-columns:1fr; }
  .image { height:310px; }
  .animal-card img,.card-image img { height:310px; }
  .button-secondary { margin-left:0; }
}


/* =========================================================
   SICHTBARE ANIMATIONEN – Version 2
   ========================================================= */

.hero {
  animation: heroBackgroundZoom 7s ease-out both;
}

@keyframes heroBackgroundZoom {
  from {
    background-size: 112%;
  }
  to {
    background-size: 100%;
  }
}

.hero-inner {
  animation: heroContainerIn 1.1s ease both;
}

@keyframes heroContainerIn {
  from {
    opacity: 0;
    transform: translateY(45px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.hero .logo-hero {
  animation: logoPopIn .9s ease both;
}

@keyframes logoPopIn {
  0% {
    opacity: 0;
    transform: scale(.65) rotate(-4deg);
  }
  70% {
    opacity: 1;
    transform: scale(1.06) rotate(1deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

.hero h1 {
  animation: titleSlideIn 1s ease both .15s;
}

@keyframes titleSlideIn {
  from {
    opacity: 0;
    transform: translateX(-55px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hero .subline {
  animation: subtitleFadeIn 1s ease both .35s;
}

.hero .button {
  animation: buttonRiseIn .9s ease both .55s;
}

@keyframes subtitleFadeIn {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes buttonRiseIn {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal,
.reveal-left,
.reveal-right {
  opacity: 0 !important;
  transition:
    opacity 1s cubic-bezier(.22,.61,.36,1),
    transform 1s cubic-bezier(.22,.61,.36,1) !important;
}

.reveal {
  transform: translateY(80px) scale(.96) !important;
}

.reveal-left {
  transform: translateX(-90px) scale(.96) !important;
}

.reveal-right {
  transform: translateX(90px) scale(.96) !important;
}

.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible {
  opacity: 1 !important;
  transform: translate(0,0) scale(1) !important;
}

.delay-1 { transition-delay: .15s !important; }
.delay-2 { transition-delay: .32s !important; }
.delay-3 { transition-delay: .49s !important; }
.delay-4 { transition-delay: .66s !important; }

.card,
.animal-card,
.faq-item {
  transform-origin: center;
}

.card.is-visible,
.animal-card.is-visible,
.faq-item.is-visible {
  animation: softPop .75s ease both;
}

@keyframes softPop {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(.92);
  }
  70% {
    opacity: 1;
    transform: translateY(-6px) scale(1.015);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.card:hover,
.animal-card:hover,
.faq-item:hover {
  transform: translateY(-14px) scale(1.015) !important;
  box-shadow: 0 36px 90px rgba(11,47,134,.18) !important;
}

.image.is-visible {
  animation: imageReveal 1.1s ease both;
}

@keyframes imageReveal {
  from {
    opacity: 0;
    transform: scale(1.08);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

.contact-band {
  position: relative;
  overflow: hidden;
}

.contact-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.22), transparent 32%);
  opacity: 0;
  animation: ctaGlow 2s ease forwards;
}

@keyframes ctaGlow {
  from {
    opacity: 0;
    transform: scale(.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.contact-band > * {
  position: relative;
  z-index: 1;
}

/* Mobile: keine großen Hintergrund-Zooms, aber sichtbare Reveals */
@media(max-width: 900px) {
  .hero {
    animation: none;
  }

  .reveal {
    transform: translateY(55px) scale(.97) !important;
  }

  .reveal-left,
  .reveal-right {
    transform: translateY(55px) scale(.97) !important;
  }
}


/* Instagram Footer */
.footer-social{
    margin-top:18px;
}
.footer-social a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--blue);
    font-weight:700;
    text-decoration:none;
    transition:.3s;
}
.footer-social a:hover{
    color:#4b7bd8;
    transform:translateY(-2px);
}
.instagram-box{
    background:linear-gradient(135deg,#f4f8ff,#ffffff);
    border-radius:18px;
    padding:28px;
    box-shadow:var(--shadow-soft);
}


/* =========================================================
   FINALER FEINSCHLIFF
   Mobile Navigation, Floating Buttons, Cookie-Hinweis,
   Lightbox, Ladeanimation, SEO-Hilfsklassen
   ========================================================= */

/* Schriften:
   Aktuell bewusst systemnah: Arial für Fließtext, Georgia für Überschriften.
   Vorteil: lokal, schnell, DSGVO-unproblematisch, keine Google-Fonts-Verbindung.
*/

.mobile-menu-toggle {
  display:none;
  border:0;
  background:var(--blue);
  color:#fff;
  border-radius:10px;
  padding:10px 14px;
  font-size:24px;
  cursor:pointer;
}

.floating-actions {
  position:fixed;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  z-index:200;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.floating-actions a {
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#fff;
  color:var(--blue);
  text-decoration:none;
  box-shadow:0 18px 45px rgba(11,47,134,.18);
  font-size:22px;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.floating-actions a:hover {
  transform:translateY(-4px) scale(1.05);
  background:var(--blue);
  color:#fff;
  box-shadow:0 26px 60px rgba(11,47,134,.28);
}

.cookie-banner {
  position:fixed;
  left:20px;
  right:20px;
  bottom:20px;
  z-index:500;
  background:#fff;
  border-radius:18px;
  padding:20px;
  box-shadow:0 28px 80px rgba(11,47,134,.20);
  display:none;
  max-width:880px;
  margin:0 auto;
}

.cookie-banner.is-visible {
  display:block;
  animation:cookieIn .55s ease both;
}

@keyframes cookieIn {
  from { opacity:0; transform:translateY(30px); }
  to { opacity:1; transform:translateY(0); }
}

.cookie-banner p {
  margin:0 0 12px;
  font-size:15px;
  line-height:1.6;
}

.cookie-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.cookie-actions button,
.cookie-actions a {
  border:0;
  cursor:pointer;
  border-radius:10px;
  padding:11px 16px;
  font-weight:700;
  text-decoration:none;
}

.cookie-ok {
  background:var(--blue);
  color:#fff;
}

.cookie-more {
  background:var(--light);
  color:var(--blue);
}

.page-loader {
  position:fixed;
  inset:0;
  z-index:9999;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .45s ease, visibility .45s ease;
}

.page-loader.is-hidden {
  opacity:0;
  visibility:hidden;
}

.loader-content {
  text-align:center;
  color:var(--blue);
  font-family:Georgia,serif;
  font-style:italic;
  font-size:24px;
}

.loader-logo {
  width:110px;
  margin:0 auto 18px;
  animation:loaderPulse 1.4s ease-in-out infinite;
}

@keyframes loaderPulse {
  0%,100% { transform:scale(1); opacity:.75; }
  50% { transform:scale(1.08); opacity:1; }
}

.lightbox {
  position:fixed;
  inset:0;
  background:rgba(6,33,95,.86);
  z-index:700;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.lightbox.is-open {
  display:flex;
}

.lightbox img {
  max-width:min(1100px, 92vw);
  max-height:82vh;
  border-radius:18px;
  box-shadow:0 30px 90px rgba(0,0,0,.35);
}

.lightbox-close {
  position:absolute;
  top:18px;
  right:18px;
  background:#fff;
  color:var(--blue);
  border:0;
  border-radius:999px;
  width:44px;
  height:44px;
  font-size:24px;
  cursor:pointer;
}

.galerie-grid img,
.animal-card img,
.card-image img {
  cursor:pointer;
}

.skip-link {
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.skip-link:focus {
  left:20px;
  top:20px;
  width:auto;
  height:auto;
  z-index:10000;
  background:#fff;
  color:var(--blue);
  padding:12px 16px;
  border-radius:10px;
  box-shadow:var(--shadow);
}

@media(max-width:900px) {
  .mobile-menu-toggle {
    display:block;
  }

  .site-nav {
    align-items:center;
  }

  .menu {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#fff;
    padding:18px 24px 24px;
    box-shadow:0 20px 45px rgba(11,47,134,.14);
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }

  .menu.is-open {
    display:flex;
  }

  .menu a {
    font-size:17px;
  }

  .floating-actions {
    right:12px;
    bottom:18px;
    top:auto;
    transform:none;
    flex-direction:row;
  }

  .floating-actions a {
    width:44px;
    height:44px;
    font-size:20px;
  }

  .cookie-banner {
    left:12px;
    right:12px;
    bottom:12px;
  }
}