/* =================================================================
   HÄUSERHELDEN · banner.css
   Minimalistisches „Eselsohr" (umgeklappte Seitenecke) unten rechts.
   Teaser für die KI-Web-App (in Arbeit).
   - Eingeklappt: kleine goldene Faltecke, nur ein „KI" schaut heraus.
   - Desktop: Hover klappt die Ecke weiter auf + zeigt „Häuserhelden KI · bald".
   - Handy: Tipp klappt auf/zu (JS in main.js, Klasse .is-open).
   ================================================================= */
.kibanner {
  position: fixed; right: 0; bottom: 0; z-index: 980;
  width: 67px; height: 67px;   /* +15% gegenüber 58px */
  transition: width 0.45s var(--ease), height 0.45s var(--ease);
}
/* Immer quadratisch (auch aufgeklappt) -> Diagonale bleibt 45°,
   obere und untere Ecke sind dadurch immer gleich (symmetrisch). */
.kibanner:hover, .kibanner.is-open { width: 224px; height: 224px; }

.kibanner__btn {
  position: absolute; inset: 0; margin: 0; padding: 0; border: 0;
  background: none; cursor: pointer; display: block;
  text-decoration: none; color: inherit;
}

/* Die umgeklappte Ecke. Goldenes Dreieck per Diagonal-Verlauf (kein clip-path),
   damit es runde Ecken haben kann. Die Ecke füllt DAUERHAFT die untere rechte
   Ecke (unten/rechts bündig); die Animation skaliert sie nur nach vorne heraus. */
.kibanner__fold {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  filter: drop-shadow(-3px -3px 5px rgba(0, 0, 0, 0.32));
  transform-origin: bottom right;   /* bleibt in der Ecke verankert */
  animation: kiflap 2.8s ease-in-out infinite;
  overflow: visible;
}
/* Goldenes Dreieck mit runden Eck-Verbindungen -> alle 3 Ecken gleich gerundet */
.kibanner__fold polygon {
  fill: var(--brass-500); stroke: var(--brass-500);
  stroke-width: 11; stroke-linejoin: round;
}
/* „Flattern" als Klick-Hinweis: NUR nach vorne pulsen (Skalierung aus der Ecke),
   kein Wegschieben -> kein weißer Spalt. Pausiert beim Aufklappen. */
@keyframes kiflap {
  0%, 55%, 100% { transform: scale(1); }
  68% { transform: scale(1.2); }
  78% { transform: scale(1.07); }
  86% { transform: scale(1.15); }
  94% { transform: scale(1.02); }
}
.kibanner:hover .kibanner__fold, .kibanner.is-open .kibanner__fold { animation: none; }

/* Beschriftung im Dreieck (unten rechts, dunkel auf Gold) */
.kibanner__label { position: absolute; inset: 0; color: var(--espresso-900); }
/* Eingeklappter Zustand — Haus-Symbol unten rechts IN der Ecke */
.kibanner__ki {
  position: absolute; right: 11px; bottom: 8px;
  color: var(--espresso-900);
  transition: opacity 0.3s var(--ease);
}
.kibanner__ki svg { width: 19px; height: 19px; display: block; }
/* Aufklapp-Text — eigene absolute Position, schiebt das „KI" NICHT mehr raus */
.kibanner__full {
  position: absolute; right: 12px; bottom: 10px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px; max-width: 150px;
  text-align: right; line-height: 1.12;
  opacity: 0; transform: translate(8px, 8px); pointer-events: none;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.kibanner__full strong { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; line-height: 1.05; }
.kibanner__full .kibanner__lead { font-size: 0.74rem; line-height: 1.2; max-width: 130px; }
.kibanner__full .kibanner__cta {
  margin-top: 3px; font-family: var(--font-mono); font-weight: 700;
  font-size: 0.64rem; letter-spacing: 0.04em; text-transform: uppercase;
  border-bottom: 1.5px solid var(--espresso-900); padding-bottom: 1px;
}

.kibanner:hover .kibanner__ki, .kibanner.is-open .kibanner__ki { opacity: 0; }
.kibanner:hover .kibanner__full, .kibanner.is-open .kibanner__full { opacity: 1; transform: none; pointer-events: auto; }

/* Handy: am Bildschirmrand bündig. Sobald die Aktionsleiste sichtbar ist
   (html.bar-visible, gesetzt per JS beim Scrollen), rutscht das Eselsohr
   bündig DARÜBER mit — schwebt also nie frei in der Luft. */
html.is-phone .kibanner {
  bottom: env(safe-area-inset-bottom);
  transition: width 0.45s var(--ease), height 0.45s var(--ease), bottom 0.4s var(--ease);
}
html.is-phone.bar-visible .kibanner { bottom: calc(var(--hh-bar-h, 3.4rem) + env(safe-area-inset-bottom)); }

@media (prefers-reduced-motion: reduce) {
  .kibanner, .kibanner__full { transition: none; }
  .kibanner__fold { animation: none; }
}