/* Übergangsseite der Kitas — bewusst schlicht.
   Markenfarben kommen aus marke.css, sonst gibt es nichts zu laden:
   kein Skript, keine Animation, ein einziger Stylesheet-Aufruf. */
* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--dunkel);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  gap: 1.4rem;
  /* Ein weicher Farbverlauf am unteren Rand — nimmt der Fläche die
     Kälte, ohne dass etwas blinkt oder sich bewegt. */
  background-image: linear-gradient(to bottom,
    transparent 62%,
    color-mix(in srgb, var(--blatt) 9%, var(--grund)) 100%);
}

.logo { display: block; width: auto; height: auto; max-width: min(220px, 56vw); max-height: 150px; }

h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 5.6vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

.satz {
  font-size: clamp(1rem, 2.4vw, 1.14rem);
  line-height: 1.62;
  max-width: 34ch;
  margin: 0;
  color: color-mix(in srgb, var(--dunkel) 86%, var(--grund));
  text-wrap: balance;
}

.strich { width: 54px; height: 3px; border-radius: 2px; background: var(--blatt); }

.kontakt {
  font-size: 0.92rem; line-height: 1.6; margin: 0;
  color: color-mix(in srgb, var(--dunkel) 68%, var(--grund));
}
.kontakt a { color: var(--dunkel); text-decoration-color: var(--blatt); text-underline-offset: 3px; }
.kontakt a:focus-visible { outline: 2px solid var(--dunkel); outline-offset: 3px; border-radius: 2px; }

@media (max-width: 560px) {
  body { gap: 1.1rem; padding: 1.5rem 1.2rem; }
  .logo { max-width: min(170px, 48vw); max-height: 112px; }
  .strich { width: 44px; height: 2px; }
}

/* --- Kleines Bauzeichen -------------------------------------------------
   Ersetzt den Trennstrich. Vier Steine und ein Dach setzen sich nach-
   einander, das Maennchen klopft dazu. Ein Durchlauf dauert 9 Sekunden,
   danach beginnt es von vorn - bewusst langsam, es soll nebenher laufen
   und nicht die Aufmerksamkeit vom Text ziehen. */
.bau {
  display: block;
  width: clamp(122px, 33vw, 162px);
  height: auto;
  overflow: visible;
}

.bau .boden {
  stroke: color-mix(in srgb, var(--dunkel) 20%, var(--grund));
  stroke-width: 1.5;
  stroke-linecap: round;
}

.bau .haus rect {
  fill: color-mix(in srgb, var(--blatt) 22%, var(--grund));
  stroke: color-mix(in srgb, var(--blatt) 55%, var(--dunkel));
  stroke-width: 1.15;
}
.bau .haus path {
  fill: color-mix(in srgb, var(--blatt) 46%, var(--dunkel));
  stroke: none;
}

.bau .schatten { fill: color-mix(in srgb, var(--dunkel) 11%, transparent); }

.bau .vorrat rect {
  fill: color-mix(in srgb, var(--blatt) 13%, var(--grund));
  stroke: color-mix(in srgb, var(--blatt) 32%, var(--dunkel));
  stroke-width: 1;
}

/* Staubwoelkchen: zieht in die Breite und verblasst dabei. Es startet
   kurz VOR dem Aufsetzen, sonst wirkt es wie ein Nachklapp. */
.bau .staub ellipse {
  opacity: 0;
  fill: color-mix(in srgb, var(--dunkel) 26%, transparent);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bau-staub .52s ease-out both;
}
.bau .staub ellipse:nth-child(1) { animation-delay: .84s; }
.bau .staub ellipse:nth-child(2) { animation-delay: 1.21s; }
.bau .staub ellipse:nth-child(3) { animation-delay: 1.58s; }
.bau .staub ellipse:nth-child(4) { animation-delay: 1.95s; }
.bau .staub ellipse:nth-child(5) { animation-delay: 2.44s; }

@keyframes bau-staub {
  from { opacity: .9; transform: scale(.25, .7); }
  to   { opacity: 0;  transform: scale(1.9, .3); }
}

.bau .kopf { fill: var(--dunkel); }
.bau .helm,
.bau .helmrand { fill: var(--blatt); stroke: none; }
.bau .mann .rumpf,
.bau .mann .arm,
.bau .mann .hammer {
  fill: none;
  stroke: var(--dunkel);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Das Haus entsteht einmal und bleibt dann stehen. Eine Schleife hatte
   den Haken, dass die Teile in derselben Reihenfolge wieder verschwanden
   wie sie kamen - erst der unterste Stein. Das sah aus, als stuerze das
   Haus ein. Stehenbleiben ist ruhiger und passt zur Seite; die Bewegung
   kommt vom Maennchen, das weiterarbeitet. */
.bau .haus > * {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bau-setzen .62s cubic-bezier(.3, 1.5, .55, 1) both;
}
.bau .haus > *:nth-child(1) { animation-delay: .35s; }
.bau .haus > *:nth-child(2) { animation-delay: .72s; }
.bau .haus > *:nth-child(3) { animation-delay: 1.09s; }
.bau .haus > *:nth-child(4) { animation-delay: 1.46s; }
.bau .haus > *:nth-child(5) { animation-delay: 1.95s; }

@keyframes bau-setzen {
  from { opacity: 0; transform: translateY(-9px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Der Drehpunkt ist die Schulter. Sie liegt beim Umschliessenden
   genau auf der linken unteren Ecke der Gruppe, deshalb fill-box mit
   0% 100% statt fester Koordinaten - das haelt auch, wenn sich die
   Armlaenge aendert. */
.bau .mann .arm-dreh {
  transform-box: fill-box;
  transform-origin: 0% 100%;
  animation: bau-klopfen .68s ease-in-out infinite alternate;
}
/* Der Schlag geht nach UNTEN. Beim Hochschwingen landete der
   Hammerkopf sonst auf dem Helm - bei 7 Einheiten Armlaenge und einer
   Schulter nur 2,5 Einheiten unter dem Kinn reicht er bis ins Gesicht. */
@keyframes bau-klopfen {
  from { transform: rotate(0deg); }
  to   { transform: rotate(24deg); }
}

.bau .mann {
  animation: bau-wippen 1.16s ease-in-out infinite;
}
@keyframes bau-wippen {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-.7px); }
}

/* Wer Bewegung abgeschaltet hat, sieht das fertige Haus - nicht ein
   leeres Feld, denn ohne Animation bliebe opacity auf 0 stehen. */
@media (prefers-reduced-motion: reduce) {
  .bau .haus > *,
  .bau .staub ellipse,
  .bau .mann,
  .bau .mann .arm-dreh { animation: none; }
  .bau .staub { display: none; }
  .bau .haus > * { opacity: 1; transform: none; }
  .bau .mann .arm-dreh { transform: rotate(12deg); }
}

/* Der Hammerkopf sitzt quer am Armende und ist bewusst dicker als der
   Arm - sonst liest er sich als geknickter Unterarm. */
.bau .mann .hammer { stroke-width: 2.7; }