/* === MAIN – Landing (schlank) ================================= */

/* ============================
   ROTATE HINT (Safari-safe)
   ============================ */

#rotate-hint {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  place-items: center;
  justify-items: center;
  align-content: center;
  text-align: center;
  background: #ffffff; /* ← kannst du auch mit HEX oder RGBA anpassen */
  z-index: 2147483647;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  isolation: isolate;
}

/* Inneres Grid */
#rotate-hint .rotate-inner {
  display: grid;
  gap: 14px;
  justify-items: center;
  max-width: 90%;
  margin: 0 auto;
}

/* GIF */
#rotate-hint .rotate-gif {
  width: clamp(160px, 40vmin, 240px);
  height: auto;
  display: block;
  object-fit: contain;
}

/* Text */
#rotate-hint .rotate-text {
  font-size: clamp(15px, 2.5vw, 18px);
  color: #111;
  line-height: 1.4;
  margin: 0;
}

/* Aktivierung auf Mobile Portrait */
@media screen and (max-width: 995px) and (orientation: portrait) {
  #rotate-hint {
    display: grid !important;
    visibility: visible !important;
  }

  /* Verhindert „weiß auf weiß“ Blinken */
  html, body {
    background: #ffffff !important;
    overflow: hidden !important;
  }

  /* Alles andere ausblenden */
  body > *:not(#rotate-hint) {
    display: none !important;
    visibility: hidden !important;
  }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
  #rotate-hint .rotate-gif {
    display: none;
  }
}

/* === HERO mit Hintergrundbild (Main) ===================== */
/* ✏️ Bildpfad hier anpassen */
.hero--with-image{
  position: relative;
  isolation: isolate;                  /* pseudo-Overlay bleibt hinter dem Text */
  background-image: url("../img/main/hero-main.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Höhe/Abstände (mobile-first) */
  min-height: 42vh;                    /* mobile */
  border-radius: var(--radius);
  padding: clamp(16px, 2.5vw, 28px);
  color: #fff;                         /* Standard: heller Text auf Bild */
}

/* leichte Abdunklung für bessere Lesbarkeit */
.hero--with-image::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;                         /* hinter Content */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.28),
    rgba(0,0,0,.50)
  );
  border-radius: inherit;
}

/* Überschriften / Text innerhalb des Heros etwas „luftiger“ */
.hero--with-image .hero__box{
  background: transparent !important;
}

/* Desktop: hero größer wirken lassen */
@media (min-width: 992px){
  .hero--with-image{
    min-height: 56vh;
    padding: clamp(16px, 2.5vw, 28px);
  }
}

/* Wenn du dunklen Text willst (z. B. bei sehr hellen Bildern) → Klasse zusätzlich setzen: .hero--light */
.hero--light{ color: var(--ink); }
.hero--light::before{
  background: linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,.15));
}

/* 2) Force 2 columns in very narrow landscape */
@media (orientation: landscape) and (max-width: 767.98px){
  .force-2cols-landscape{ display:flex; flex-wrap:wrap; }
  .force-2cols-landscape > [class^="col"]{
    flex:0 0 50%; max-width:50%;
  }
}

/* 3) Tiles (A/B) – simple, getrennte Farben + Hover */
:root{
  --tile-radius: var(--radius);
  --tile-pad: clamp(16px, 2.5vw, 28px);

  /* A */
  --tileA-bg:     #f15025;
  --tileA-text:   #ffffff;
  --tileA-border: #f15025;
  --tileA-hover:  #ff6a3d;
  --tileA-shadow: 0 8px 24px rgba(0,0,0,.12);

  /* B */
  --tileB-bg:     #0b2c5f;
  --tileB-text:   #ffffff;
  --tileB-border: #021740;
  --tileB-hover:  #213a7a;
  --tileB-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* Basis-Look (Form/Animation) */
.tile{
  display:block;
  text-decoration:none;
  padding: var(--tile-pad);
  min-height: clamp(200px, 32vh, 360px);
  border-radius: var(--tile-radius);
  position: relative;  /* wichtig für ::after */
  z-index:0;
  overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tile h2, .tile p{ position:relative; z-index:1; }

/* A */
.tile--a{
  background: var(--tileA-bg);
  color:      var(--tileA-text);
  border: 1px solid var(--tileA-border);
}
.tile--a:hover, .tile--a:focus-visible{
  transform: translateY(-15px);
  box-shadow: var(--tileA-shadow);
  border-color: var(--tileA-hover);
  outline:none;
}

/* B */
.tile--b{
  background: var(--tileB-bg);
  color:      var(--tileB-text);
  border: 1px solid var(--tileB-border);
}
.tile--b:hover, .tile--b:focus-visible{
  transform: translateY(-15px);
  box-shadow: var(--tileB-shadow);
  border-color: var(--tileB-hover);
  outline:none;
}

/* 4) Tile-Logos rechts, „aus dem Nebel“ (robust, ohne mask) */
:root{
  --tile-logo-size:   clamp(160px, 40%, 300px);
  --tile-logo-right:  clamp(16px, 3vw, 28px);
  --tile-logo-opacity:.99;
}

.tile::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-repeat:no-repeat;
  background-position: right var(--tile-logo-right) center;
  background-size: var(--tile-logo-size) auto;
  opacity: var(--tile-logo-opacity);
  transform: translateX(12px);
  filter: blur(10px);
  animation: fog-in 900ms ease-out 120ms both;
  mix-blend-mode: soft-light; /* alternativ: overlay / normal */
}
/* pro Säule eigenes Logo (SVG/PNG egal) */
.tile--a::after{ background-image: url("../img/main/tile-a-logo.svg"); }
.tile--b::after{ background-image: url("../img/main/tile-b-logo.svg"); }

.tile:hover::after{
  opacity: calc(var(--tile-logo-opacity) + .03);
  transform: translateX(6px);
  filter: blur(6px);
}

@keyframes fog-in{
  0%   { opacity:0; transform:translateX(18px); filter:blur(14px); }
  60%  { opacity:calc(var(--tile-logo-opacity) * .8); filter:blur(7px); }
  100% { opacity:var(--tile-logo-opacity); transform:translateX(0); filter:blur(0); }
}
@media (prefers-reduced-motion: reduce){
  .tile::after{ animation:none; transform:none; filter:none; }
}

/* 5) Hero (bündig) – Bild optional später */
.hero--main .hero__box{
  color:#fff;
  padding:60px;
  min-height: clamp(280px, 50vh, 100px);
  border-radius: var(--radius);
  background: #1f2937; /* ✏️ Platzhalter; später gern mit Bild ersetzen */
}
/* Beispiel (später aktivieren, wenn Bild vorhanden):
.hero--main .hero__box{
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.35)),
    url("../assets/img/main/hero-main-1280.jpg");
  background-size: cover;
  background-position: center;
}
*/


/* === PORTRAIT-HINWEIS – sichtbare Ebene über allem === */
@media screen and (max-width: 995px) and (orientation: portrait) {
  #rotate-hint {
    display: grid !important;
    place-items: center;
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483647 !important;
    width: 100% !important;
    height: 100% !important;
    text-align: center;
    overflow: hidden;
    background: rgba(255,255,255,0.85) !important; /* leicht transparentes Weiß */
    backdrop-filter: blur(10px) !important; /* Blur-Effekt für Hintergrund */
    -webkit-backdrop-filter: blur(10px) !important;
    padding-top: calc(env(safe-area-inset-top) + 24px) !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 24px) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
  }

  #rotate-hint img {
    width: clamp(300px, 50vmin, 600px);
    height: auto;
    margin-bottom: 20px;
  }

  #rotate-hint p {
    text-align: left;
    max-width: 90%;
    margin:4px auto 0;
    color: #000;
    line-height: 1.4;
  }
}

@media screen and (orientation: landscape) {
  #rotate-hint {
    display: none !important;
  }
}

/* === Pillar Reveal – Jump (langsamer, ease-in-out) ================== */
#columns .tile{
  position: relative;
  will-change: transform, box-shadow;
  transition: transform .2s ease, box-shadow .2s ease;
  z-index: 1;
}

/* etwas längerer, weicher Sprung */
#columns.pillars-animate .tile{
  animation: pillar-lift 1.15s cubic-bezier(.42,0,.58,1) both; /* ease-in-out */
  z-index: 50;
}

@keyframes pillar-lift{
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-28vh); }
  55%  { transform: translateY(-31vh); } /* kurze Spitze zum Verdecken */
  85%  { transform: translateY(6px); }   /* sanfter Overshoot */
  100% { transform: translateY(0); }
}

/* === Signature Outline – jetzt endlos, bis Klick ==================== */
.pillar-cta-outline{
  animation: pillar-outline 1.15s ease-out 0s infinite;
}

@keyframes pillar-outline{
  0%   { box-shadow: 0 0 0 0 #ffba0800, 0 0 0 #0000; }
  50%  { box-shadow: 0 0 0 6px #ffba088c, 0 14px 30px #0217402e; }
  100% { box-shadow: 0 0 0 0 #ffba0800, 0 0 0 #0000; }
}

/* Hover/Focus bleibt dezent */
#columns .tile:hover, #columns .tile:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(2,23,64,.12);
}

/* Bewegungs-reduziert */
@media (prefers-reduced-motion: reduce){
  #columns.pillars-animate .tile{ animation: none !important; }
  .pillar-cta-outline{ animation: none !important; box-shadow: 0 0 0 3px #FFBA08; }
}