/* ===== Großes Logo auf der Startseite: drei Würfel ===== */
/* Überschrift bekommt ihre natürliche Breite (nie getrennt), das Logo füllt nur den freien Platz daneben */
.start-raster{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:clamp(40px,5vw,96px);align-items:center}
.startseite .start h1{font-size:clamp(46px,7.4vw,116px)}
.startseite .start h1,.startseite .start h1 *{-webkit-hyphens:manual;hyphens:manual}
.startseite .start .zeile{white-space:nowrap}

.signet{container-type:inline-size;width:100%;max-width:600px;justify-self:end;user-select:none}
.signet-reihe,.signet-zeile{--k:calc(100cqw / 3.164)}
.signet-reihe{display:flex;gap:calc(var(--k) * .082)}
.wuerfel{width:var(--k);height:var(--k);perspective:calc(var(--k) * 6);opacity:0;transform:translateY(34px) scale(.9);transform-origin:50% 100%;
  animation:wuerfel-ein 1.3s var(--ease) forwards;animation-delay:calc(.35s + var(--i) * .16s)}
@keyframes wuerfel-ein{to{opacity:1;transform:none}}
.w-innen{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform-origin:50% 50% 0;will-change:transform}
.fl{position:absolute;inset:0;backface-visibility:hidden}
.fl.vorne svg{display:block;width:100%;height:100%}
/* Seitenflächen klappen nach hinten (Drehpunkt = Vorderseite, die Kachel bleibt an ihrem Platz) */
.fl.oben{transform-origin:50% 0;transform:rotateX(-90deg);background:#E2AA62}
.fl.unten{transform-origin:50% 100%;transform:rotateX(90deg);background:#A06920}
.fl.links{transform-origin:0 50%;transform:rotateY(90deg);background:#BC7F2F}
.fl.rechts{transform-origin:100% 50%;transform:rotateY(-90deg);background:#B0762A}
.wuerfel.hell .fl.oben{background:#FFFCF6}
.wuerfel.hell .fl.unten{background:#D6C7AA}
.wuerfel.hell .fl.links{background:#EADFC9}
.wuerfel.hell .fl.rechts{background:#E2D5BC}
.signet-zeile{margin-top:calc(var(--k) * .1);opacity:0;transform:translateY(10px);animation:auf 1s 1.2s var(--ease) forwards}
.signet-zeile svg{display:block;width:100%;height:auto}

/* Kleines Logo in der Kopfzeile erscheint erst, wenn das große aus dem Bild ist */
.startseite .kopf .logo{opacity:0;transform:translateY(-6px);transition:opacity .5s,transform .6s var(--ease);pointer-events:none}
.startseite.signet-weg .kopf .logo,.startseite.menue-offen .kopf .logo{opacity:1;transform:none;pointer-events:auto}

@media (prefers-reduced-motion:reduce){
  .wuerfel,.signet-zeile{opacity:1;transform:none;animation:none}
}
@media (max-width:1180px){
  .start-raster{grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,48px)}
  .signet{justify-self:start;order:-1;max-width:min(100%,460px)}
}
@media (max-width:767px){
  .startseite .start .zeile{white-space:normal}
}
.startseite .start .wrap{max-width:1440px}

/* Startseite: oben links ruhige Zeile, die beim Scrollen dem kleinen Logo Platz macht */
.startseite .kopf .wrap{max-width:1440px}
.kopf .logo{position:relative;display:block}
.kopf-zeile{display:none}
.startseite .kopf-zeile{display:flex;align-items:center;gap:12px;position:absolute;left:0;top:50%;white-space:nowrap;font-size:15px;letter-spacing:.02em;color:var(--ink);
  transform:translateY(-50%);opacity:1;transition:opacity .5s,transform .6s var(--ease)}
.startseite .kopf-zeile::before{content:"";width:10px;height:10px;background:var(--accent)}
.startseite .kopf-zeile i{width:4px;height:4px;border-radius:9px;background:var(--ink-soft)}
.startseite .kopf .logo{opacity:1;transform:none;pointer-events:auto}
.startseite .kopf .logo img{opacity:0;transform:translateY(-6px);transition:opacity .5s,transform .6s var(--ease)}
.startseite.signet-weg .kopf .logo img,.startseite.menue-offen .kopf .logo img{opacity:1;transform:none}
.startseite.signet-weg .kopf-zeile,.startseite.menue-offen .kopf-zeile{opacity:0;transform:translateY(-30%)}
@media (max-width:767px){.startseite .kopf-zeile{font-size:13.5px}}
@media (max-width:400px){.startseite .start h1{font-size:clamp(32px,10.8vw,46px)}}
/* Enesa (21.10.2026): Logo ohne Bewegung, auch kein Einfliegen der Würfel beim Laden */
.wuerfel,.signet-zeile{opacity:1;transform:none;animation:none}