/* ====================================== */
/* GLOBAL CSS – projektweite Styles       */
/* Header, Footer & Galerie sind extern   */
/* ====================================== */

/* Font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

/* Design Tokens */
:root {
  --font-family: 'Montserrat', sans-serif;
  --font-size: 16px;

  --primary: #002FA7;
  --beige: #F3F3E9;
  --text-dark: #00348C;

  --background: #ffffff;
  --foreground: #242424;

  --border: rgba(0,0,0,0.1);
}

/* ====================================== */
/* BASE                                   */
/* ====================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  border-color: var(--border);
}

html {
  font-size: var(--font-size);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-family);
}

/* ====================================== */
/* TYPOGRAPHY                             */
/* ====================================== */

h1, h2, h3, h4, h5 {
  margin: 0 0 0.75rem;
  font-weight: 500;
  line-height: 1.4;
}

p {
  margin: 0 0 1rem;
  line-height: 1.6;
}

/* ====================================== */
/* BUTTONS                                */
/* ====================================== */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 2.4rem;
  border-radius: 999px;
  border: 1px solid #ffffff;
  background: transparent;
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
  transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.btn-primary:hover {
  background-color: #ffffff;
  color: var(--primary);
  transform: translateY(-1px);
}

/* ====================================== */
/* SECTION WRAPPER                        */
/* ====================================== */

.section {
  padding: 6rem 0;
}

.section--light {
  background: var(--beige);
  color: var(--primary);
}

.section--blue {
  background: var(--primary);
  color: var(--beige);
}

.section__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ====================================== */
/* HERO                                   */
/* ====================================== */

.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--primary);
  color: #ffffff;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  transition: transform 0.2s ease-out;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: none;
}

.hero__content {
  position: relative;
  z-index: 3;
  padding: 4rem 1.5rem 3rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: 2.5rem;
  transform: translateX(-50%);
  z-index: 3;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #ffffff;
  text-decoration: none;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0) translateX(-50%); }
  50% { transform: translateY(-25%) translateX(-50%); }
}
@media (max-width: 880px) {
  .hero {
    min-height: auto;
    padding: 6rem 0 3rem; /* Abstand unter dem Header */
  }

  .hero__bg {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;      /* quadratisch */
    overflow: hidden;
  }

  .hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none !important; /* Parallax für mobil deaktivieren */
  }

  .hero__overlay {
    display: none;             /* brauchst du mobil nicht zwingend */
  }
}


/* ====================================== */
/* SERVICES – DER RICHTIGE MIX            */
/* ====================================== */

.services {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.75fr);
  gap: 3rem 3.5rem;
  align-items: stretch;
  margin-top: 4rem;
}

.services__title-svg {
  display: block;
  max-width: 720px;
  margin: 0 auto 2.75rem;
}

.services__lead {
  max-width: 620px;
  margin: 1.5rem auto 0;
  text-align: center;
  font-size: 0.98rem;
}

/* Linkes Bild */
.services__image {
  border-radius: 24px;
  overflow: hidden;
}

.services__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Grid rechts */
.services__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 2.5rem;
}

.services__item {
  padding-bottom: 1.7rem;
  transition: transform 0.16s ease;
}

.services__icon {
  width: 38px;
  height: 38px;
  margin-bottom: 0.75rem;
}

.services__item:hover {
  transform: translateY(-2px);
}

.services__item:hover .services__item-title {
  font-weight: 700;
}

.services__item-title {
  font-size: 0.9rem;
  font-weight: 600;
}

.services__item-text {
  font-size: 0.9rem;
  color: var(--text-dark);
}

/* ====================================== */
/* SERVICES – LINKS ALS KACHELN           */
/* ====================================== */

/* gesamte Kachel als Link, aber ohne Unterstreichung */
.services__item-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* sicherstellen, dass Text innerhalb auch nicht unterstrichen wird */
.services__item-link .services__item-title,
.services__item-link .services__item-text {
  text-decoration: none;
}

/* kein Underline im Hover-Zustand */
.services__item-link:hover {
  text-decoration: none;
}

/* beim Hover: Titel fett (du hattest das schon, das bleibt so) */
.services__item-link:hover .services__item-title {
  font-weight: 700;
}


/* ====================================== */
/* RESPONSIVE SERVICES                    */
/* ====================================== */

@media (max-width: 960px) {
  .services {
    grid-template-columns: 1fr;
  }

  .services__grid {
    grid-template-columns: 1fr;
  }
}

/* ====================================== */
/* INFINITY MARQUEES                      */
/* ====================================== */

.project-trust-section {
  background: #002FA7;
  padding: 6rem 0;
}

/* Block mit Überschrift + Marquee */
.marquee-block {
  margin-bottom: 4.5rem;
}

.marquee-title {
  color: #F3F3E9;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 1.4rem;
  font-size: 0.95rem;
}

/* ========== MARQUEE WRAPPER ========== */

.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;        /* Inhalte sauber abschneiden */
  padding: 0 2.5rem;       /* Platz für Pfeile innen */
}

/* Track, der bewegt wird */
.marquee-track {
  display: flex;
  flex-wrap: nowrap;       /* keine Zeilenumbrüche */
  white-space: nowrap;
  will-change: transform;
}

/* Wiederholende Gruppen von Bildern */
.marquee-group {
  display: flex;
  flex: 0 0 auto;          /* Gruppe nicht schrumpfen lassen */
  gap: 2.4rem;             /* Abstand zwischen den Bildern */
}
/* gleicher Abstand zwischen letzter Kachel und erster der nächsten Gruppe */
.marquee-group + .marquee-group {
  margin-left: 2.4rem;
}


/* Basis-Bildstyle */
.marquee img {
  display: block;
  width: auto;
  border-radius: 18px;
}

/* Größe: Projekte (oben) – größer */
.marquee[data-size="large"] img {
  height: 230px;
}

/* Größe: Logos (unten) */
.marquee[data-size="small"] img {
  height: 70px;
  opacity: 0.5;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.marquee[data-size="small"] img:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* ========== PFEILE ========== */

.marquee-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.18);
  color: #F3F3E9;
  border: 1px solid rgba(255,255,255,0.45);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marquee-arrow--prev {
  left: 0.6rem;      /* NICHT mehr abgeschnitten */
}

.marquee-arrow--next {
  right: 0.6rem;
}

.marquee-arrow:hover {
  background: rgba(255,255,255,0.3);
  transform: translateY(-50%) scale(1.08);
}

/* Responsive: Pfeile etwas näher an den Inhalt */
@media (max-width: 960px) {
  .marquee-arrow--prev {
    left: 0.2rem;
  }
  .marquee-arrow--next {
    right: 0.2rem;
  }

  .marquee[data-size="large"] img {
    height: 145px;
  }
  .marquee[data-size="small"] img {
    height: 60px;
  }
}

@media (max-width: 640px) {
  .marquee-arrow {
    display: none; /* mobil optional ausblenden */
  }
}
/* Sorgt dafür, dass am Übergang kein Bild "klebt" */
.marquee-group:last-child {
  margin-right: 2.4rem; /* exakt derselbe Wert wie dein gap */
}

/* Falls nach links laufend, zusätzlich: */
.marquee-group:first-child {
  margin-left: 2.4rem;
}
/* =============================== */
/* MESSAGE BLOCK unter dem Marquee */
/* =============================== */

.message-block {
  text-align: center;
  margin-top: 6rem;
  color: #F3F3E9;
}

.message-block__svg {
  width: 80%;
  max-width: 760px;
  margin: 0 auto 2.5rem;
  display: block;
  filter: brightness(0) invert(1); /* falls SVG dark ist → hell machen */
}

.message-block__subtitle {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.message-block__button {
  margin-top: 1rem;
  background: #002FA7;
  border-color: #F3F3E9;
  color: #F3F3E9;
}

.message-block__button:hover {
  background: #F3F3E9;
  color: #002FA7;
}

.business-callout {
  background: #002FA7;
  color: #F3F3E9;
  text-align: center;
  padding: 6rem 1.5rem;
}

.business-callout img {
  max-width: 820px;
  width: 90%;
  margin: 0 auto 2rem;
  display: block;
}

.business-callout p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: #F3F3E9;
}

/* ====================================== */
/* HOMEPAGE – BLOG PREVIEW                */
/* ====================================== */

.home-blog-preview {
  background: #F3F3E9;
  padding: 6rem 0 6rem;
  color: #002FA7;
}

/* Header oben */
.home-blog-preview__header {
  text-align: center;
  margin-bottom: 3rem;
}

.home-blog-preview__logo {
  width: 340px;
  max-width: 90%;
  height: auto;
  display: inline-block;
  filter: brightness(0) saturate(100%) invert(15%) sepia(90%) saturate(2500%)
          hue-rotate(205deg) brightness(80%) contrast(110%);
  /* macht SVG optisch zu #002FA7 */
}

.home-blog-preview__subtitle {
  margin-top: 1rem;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* GRID: links große Karte, rechts Liste */
.home-blog-preview__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1.4fr);
  gap: 2rem;
  align-items: stretch;
}

/* ======================= */
/* Hauptkarte links        */
/* ======================= */

.home-blog-card {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.15);
  color: #002FA7;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.home-blog-card--main {
  height: 100%;
}

.home-blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 60px rgba(0,0,0,0.25);
}

.home-blog-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* Bild 16:9, nimmt optisch ~2/3 ein */
.home-blog-card__image-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
}

.home-blog-card__image-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text */
.home-blog-card__body {
  padding: 1.4rem 1.6rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

.home-blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: 0.75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6f7a94;
}

.home-blog-card__tag {
  border: 1px solid rgba(0,47,167,0.3);
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.65rem;
}

.home-blog-card__date {
  opacity: 0.9;
}

.home-blog-card__title {
  font-size: 1.05rem;
  font-weight: 600;
}

.home-blog-card__excerpt {
  font-size: 0.9rem;
  color: #3b3b46;
  line-height: 1.55;
  margin-bottom: 0.3rem;
}

.home-blog-card__more {
  margin-top: auto;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ======================= */
/* Liste rechts            */
/* ======================= */

.home-blog-preview__list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  height: 100%;
}

.home-blog-listcard {
  flex: 1;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.home-blog-listcard__link {
  display: flex;
  align-items: stretch;
  gap: 0.9rem;
  padding: 1rem 1.2rem;
  color: #002FA7;
  text-decoration: none;
  height: 100%;
}

/* Thumbnail */
.home-blog-listcard__thumb {
  flex: 0 0 80px;
  border-radius: 12px;
  overflow: hidden;
}

.home-blog-listcard__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text rechts vom Thumb */
.home-blog-listcard__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.home-blog-listcard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6f7a94;
}

.home-blog-listcard__tag {
  border-radius: 999px;
  border: 1px solid rgba(0,47,167,0.25);
  padding: 0.05rem 0.5rem;
  font-size: 0.63rem;
}

.home-blog-listcard__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #002B76;
}

/* kleiner Pfeil rechts */
.home-blog-listcard__arrow {
  align-self: center;
  font-size: 1.1rem;
}

/* Hover-Effekt */
.home-blog-listcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
}

/* ======================= */
/* Button unten            */
/* ======================= */

.home-blog-preview__actions {
  text-align: center;
  margin-top: 3rem;
}

.home-blog-preview__button {
  background: #002FA7;
  color: #F3F3E9;
  border-color: #002FA7;
}

.home-blog-preview__button:hover {
  background: #F3F3E9;
  color: #002FA7;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .home-blog-preview__grid {
    grid-template-columns: 1fr;
  }

  .home-blog-preview__list {
    height: auto;
  }

  .home-blog-card__image-wrap {
    padding-top: 60%;
  }
}

@media (max-width: 640px) {
  .home-blog-listcard__link {
    padding: 0.9rem 1rem;
  }

  .home-blog-listcard__thumb {
    flex-basis: 72px;
  }
}
/* ====================================== */
/* MOBILE HEADER & HERO                   */
/* ====================================== */

@media (max-width: 880px) {

  /* Header: auf Mobile immer vollflächig blau, nicht transparent */
  .rooh-header {
    background: #002FA7;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  /* Hero: nicht mehr 100vh, Bild sitzt unter dem Header */
  .hero {
    min-height: auto;
    padding-top: 4.8rem; /* Platz für den fixen Header */
  }

  /* Hero-Bild im 4:3-Format */
  .hero__bg {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }

  .hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none !important; /* Parallax auf Mobile ausschalten */
  }

  .hero__overlay {
    background: none;
  }

  .hero__scroll-indicator {
    bottom: 1.5rem;
  }
}
/* ====================================== */
/* MOBILE HEADER FIX                      */
/* ====================================== */
@media (max-width: 880px) {

  /* Header immer gefärbt */
  .rooh-header {
    background: #002FA7 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    padding: 1rem 1.5rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
  }

  /* Desktop-Navi ausblenden */
  .rooh-header__nav {
    display: none;
  }

  /* Mobile-Container sichtbar */
  .rooh-header__mobile {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
  }

  /* Burger rechts, nicht abgeschnitten */
  .rooh-header__burger {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .4rem;
    margin-right: 0;
  }

  /* Mobile Menu Panel */
  .rooh-header__mobile-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: #002FA7;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
    width: 75vw;
    max-width: 340px;
    border-left: 1px solid rgba(255,255,255,.2);
    border-bottom: 1px solid rgba(255,255,255,.2);
  }

  /* Menüeinträge rechtsbündig */
  .rooh-header__mobile-menu .rooh-header__nav-link {
    text-align: right; !important;
  }

  /* BLUEPRINTS ganz unten, rechts */
  .rooh-header__mobile-menu .rooh-header__blueprints {
    align-self: flex-end;
  }
}
/* ====================================== */
/* MOBILE HERO 4:3                        */
/* ====================================== */
@media (max-width: 880px) {

  .hero {
    min-height: auto;
    padding-top: 6rem; /* Platz für fixen Header */
  }

  .hero__bg {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;  /* korrektes Format */
    overflow: hidden;
  }

  .hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none !important; /* Parallax aus */
  }

  .hero__scroll-indicator {
    display: none; /* mobil unnötig */
  }
}
/* ====================================== */
/* MOBILE FOOTER                          */
/* ====================================== */
@media (max-width: 900px) {

  .rooh-footer__col--cta {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .rooh-footer__logoicon {
    justify-content: flex-start !important;
  }

  .rooh-footer__blueprints {
    margin: 0 !important;
  }
}